Comic Text

Renders comic-style text with animation. Displays text in a bold, stylized format with a black outline and background dots. Use for eye-catching headlines or titles in a playful design.

byMagic UI

Installation

terminal

pnpm dlx layro-cli add @magicuidesign/comic-text

npx layro-cli add @magicuidesign/comic-text

npx layro-cli add @magicuidesign/comic-text

bunx layro-cli add @magicuidesign/comic-text

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

import { type CSSProperties } from "react"
import { motion } from "motion/react"

import { cn } from "@/lib/utils"

type ComicTextProps = {
  children: string
  className?: string
  style?: CSSProperties
  fontSize?: number
}