Skip to content

Commit ee85a3a

Browse files
iambharathpadhuitsarghyadas
iambharathpadhu
and
itsarghyadas
authored
Add Comic Text component (#722)
* feat: added comic text * feat: updated comic text with lint fix --------- Co-authored-by: Arghya Das <[email protected]>
1 parent 2b4f856 commit ee85a3a

File tree

11 files changed

+312
-0
lines changed

11 files changed

+312
-0
lines changed

‎__registry__/index.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1103,6 +1103,29 @@ export const Index: Record<string, any> = {
11031103
}),
11041104
meta: undefined,
11051105
},
1106+
"comic-text": {
1107+
name: "comic-text",
1108+
description: "Comic text animation",
1109+
type: "registry:ui",
1110+
registryDependencies: undefined,
1111+
files: [
1112+
{
1113+
path: "registry/magicui/comic-text.tsx",
1114+
type: "registry:ui",
1115+
target: "components/magicui/comic-text.tsx",
1116+
},
1117+
],
1118+
component: React.lazy(async () => {
1119+
const mod = await import("@/registry/magicui/comic-text.tsx");
1120+
const exportName =
1121+
Object.keys(mod).find(
1122+
(key) =>
1123+
typeof mod[key] === "function" || typeof mod[key] === "object",
1124+
) || item.name;
1125+
return { default: mod.default || mod[exportName] };
1126+
}),
1127+
meta: undefined,
1128+
},
11061129
"icon-cloud": {
11071130
name: "icon-cloud",
11081131
description: "An interactive 3D tag cloud component",
@@ -3465,6 +3488,29 @@ export const Index: Record<string, any> = {
34653488
}),
34663489
meta: undefined,
34673490
},
3491+
"comic-text-demo": {
3492+
name: "comic-text-demo",
3493+
description: "Example showing comic text animation.",
3494+
type: "registry:example",
3495+
registryDependencies: ["https://magicui.design/r/comic-text"],
3496+
files: [
3497+
{
3498+
path: "registry/example/comic-text-demo.tsx",
3499+
type: "registry:example",
3500+
target: "components/comic-text-demo.tsx",
3501+
},
3502+
],
3503+
component: React.lazy(async () => {
3504+
const mod = await import("@/registry/example/comic-text-demo.tsx");
3505+
const exportName =
3506+
Object.keys(mod).find(
3507+
(key) =>
3508+
typeof mod[key] === "function" || typeof mod[key] === "object",
3509+
) || item.name;
3510+
return { default: mod.default || mod[exportName] };
3511+
}),
3512+
meta: undefined,
3513+
},
34683514
"icon-cloud-demo": {
34693515
name: "icon-cloud-demo",
34703516
description: "Example showing an interactive 3D icon cloud.",

‎config/docs.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -472,6 +472,12 @@ export const docsConfig: DocsConfig = {
472472
items: [],
473473
label: "",
474474
},
475+
{
476+
title: "Comic Text",
477+
href: `/docs/components/comic-text`,
478+
items: [],
479+
label: "New",
480+
},
475481
],
476482
},
477483
{

‎content/docs/components/comic-text.mdx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: Comic Text
3+
date: 2025-07-15
4+
description: Comic text animation that looks like a comic book text
5+
author: iambharathpadhu
6+
published: true
7+
---
8+
9+
<ComponentPreview name="comic-text-demo" />
10+
11+
## Installation
12+
13+
<Tabs defaultValue="cli">
14+
15+
<TabsList>
16+
<TabsTrigger value="cli">CLI</TabsTrigger>
17+
<TabsTrigger value="manual">Manual</TabsTrigger>
18+
</TabsList>
19+
<TabsContent value="cli">
20+
21+
```bash
22+
npx shadcn@latest add "https://magicui.design/r/comic-text"
23+
```
24+
25+
</TabsContent>
26+
27+
<TabsContent value="manual">
28+
29+
<Steps>
30+
31+
<Step>Copy and paste the following code into your project.</Step>
32+
33+
<ComponentSource name="comic-text" />
34+
35+
<Step>Update the import paths to match your project setup.</Step>
36+
37+
</Steps>
38+
39+
</TabsContent>
40+
41+
</Tabs>
42+
43+
## Usage
44+
45+
```tsx
46+
import { ComicText } from "@/components/magicui/comic-text";
47+
```
48+
49+
```tsx
50+
<ComicText>Comic Text</ComicText>
51+
```
52+
53+
## Props
54+
55+
| Prop | Type | Default | Description |
56+
| ----------- | --------------- | --------- | --------------------------------------------- |
57+
| `className` | `string` | `-` | The class name to be applied to the component |
58+
| `fontSize` | `number` | `4` | The font size of the text |
59+
| `style` | `CSSProperties` | `#ffffff` | The style of the text |
60+
| `children` | `string` | `-` | The text to be displayed |
61+
62+
## Credits
63+
64+
- Credit to [@iambharathpadhu](https://github.com/iambharathpadhu)

‎public/r/comic-text-demo.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
3+
"name": "comic-text-demo",
4+
"type": "registry:example",
5+
"title": "Comic Text Demo",
6+
"description": "Example showing comic text animation.",
7+
"registryDependencies": [
8+
"https://magicui.design/r/comic-text"
9+
],
10+
"files": [
11+
{
12+
"path": "registry/example/comic-text-demo.tsx",
13+
"content": "import { ComicText } from \"@/registry/magicui/comic-text\";\n\nexport default function ComicTextDemo() {\n return (\n <div className=\"space-y-8 text-center\">\n <ComicText fontSize={5}> \n BOOM!\n </ComicText>\n </div>\n );\n}\n",
14+
"type": "registry:example",
15+
"target": "components/comic-text-demo.tsx"
16+
}
17+
]
18+
}

‎public/r/comic-text.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
3+
"name": "comic-text",
4+
"type": "registry:ui",
5+
"title": "Comic Text",
6+
"description": "Comic text animation",
7+
"dependencies": [
8+
"motion"
9+
],
10+
"files": [
11+
{
12+
"path": "registry/magicui/comic-text.tsx",
13+
"content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\nimport { CSSProperties } from \"react\";\n\ntype ComicTextProps = {\n children: string;\n className?: string;\n style?: CSSProperties;\n fontSize?: number;\n};\n\nexport function ComicText({\n children,\n className,\n style,\n fontSize = 5,\n}: ComicTextProps) {\n if (typeof children !== \"string\") {\n throw new Error(\"children must be a string\");\n }\n\n return (\n <motion.div\n className={cn(\n \"select-none text-center\",\n className\n )}\n style={{\n fontSize: `${fontSize}rem`,\n fontFamily: \"'Bangers', 'Comic Sans MS', 'Impact', sans-serif\",\n fontWeight: \"900\",\n WebkitTextStroke: `${fontSize * 0.35}px #000000`, // Thick black outline\n transform: \"skewX(-10deg)\",\n textTransform: \"uppercase\",\n filter: `\n drop-shadow(5px 5px 0px #000000) \n drop-shadow(3px 3px 0px #B71C1C)\n `,\n backgroundColor: \"#FDE601\",\n backgroundImage:\n \"radial-gradient(circle at 1px 1px, #B71C1C 1px, transparent 0)\",\n backgroundSize: \"8px 8px\",\n backgroundClip: \"text\",\n WebkitBackgroundClip: \"text\",\n WebkitTextFillColor: \"transparent\",\n ...style,\n }}\n initial={{ opacity: 0, scale: 0.8, rotate: -2 }}\n animate={{ opacity: 1, scale: 1, rotate: 0 }}\n transition={{ \n duration: 0.6, \n ease: [0.175, 0.885, 0.32, 1.275],\n type: \"spring\"\n }}\n >\n {children}\n </motion.div>\n );\n}\n",
14+
"type": "registry:ui",
15+
"target": "components/magicui/comic-text.tsx"
16+
}
17+
]
18+
}

‎public/registry.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -905,6 +905,22 @@
905905
}
906906
]
907907
},
908+
{
909+
"name": "comic-text",
910+
"type": "registry:ui",
911+
"title": "Comic Text",
912+
"description": "Comic text animation",
913+
"dependencies": [
914+
"motion"
915+
],
916+
"files": [
917+
{
918+
"path": "registry/magicui/comic-text.tsx",
919+
"type": "registry:ui",
920+
"target": "components/magicui/comic-text.tsx"
921+
}
922+
]
923+
},
908924
{
909925
"name": "icon-cloud",
910926
"type": "registry:ui",
@@ -2575,6 +2591,22 @@
25752591
}
25762592
]
25772593
},
2594+
{
2595+
"name": "comic-text-demo",
2596+
"type": "registry:example",
2597+
"title": "Comic Text Demo",
2598+
"description": "Example showing comic text animation.",
2599+
"registryDependencies": [
2600+
"https://magicui.design/r/comic-text"
2601+
],
2602+
"files": [
2603+
{
2604+
"path": "registry/example/comic-text-demo.tsx",
2605+
"type": "registry:example",
2606+
"target": "components/comic-text-demo.tsx"
2607+
}
2608+
]
2609+
},
25782610
{
25792611
"name": "icon-cloud-demo",
25802612
"type": "registry:example",

‎registry.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -905,6 +905,22 @@
905905
}
906906
]
907907
},
908+
{
909+
"name": "comic-text",
910+
"type": "registry:ui",
911+
"title": "Comic Text",
912+
"description": "Comic text animation",
913+
"dependencies": [
914+
"motion"
915+
],
916+
"files": [
917+
{
918+
"path": "registry/magicui/comic-text.tsx",
919+
"type": "registry:ui",
920+
"target": "components/magicui/comic-text.tsx"
921+
}
922+
]
923+
},
908924
{
909925
"name": "icon-cloud",
910926
"type": "registry:ui",
@@ -2575,6 +2591,22 @@
25752591
}
25762592
]
25772593
},
2594+
{
2595+
"name": "comic-text-demo",
2596+
"type": "registry:example",
2597+
"title": "Comic Text Demo",
2598+
"description": "Example showing comic text animation.",
2599+
"registryDependencies": [
2600+
"https://magicui.design/r/comic-text"
2601+
],
2602+
"files": [
2603+
{
2604+
"path": "registry/example/comic-text-demo.tsx",
2605+
"type": "registry:example",
2606+
"target": "components/comic-text-demo.tsx"
2607+
}
2608+
]
2609+
},
25782610
{
25792611
"name": "icon-cloud-demo",
25802612
"type": "registry:example",

‎registry/example/comic-text-demo.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { ComicText } from "@/registry/magicui/comic-text";
2+
3+
export default function ComicTextDemo() {
4+
return (
5+
<div className="space-y-8 text-center">
6+
<ComicText fontSize={5}>BOOM!</ComicText>
7+
</div>
8+
);
9+
}

‎registry/magicui/comic-text.tsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
"use client";
2+
import { cn } from "@/lib/utils";
3+
import { motion } from "motion/react";
4+
import { CSSProperties } from "react";
5+
6+
type ComicTextProps = {
7+
children: string;
8+
className?: string;
9+
style?: CSSProperties;
10+
fontSize?: number;
11+
};
12+
13+
export function ComicText({
14+
children,
15+
className,
16+
style,
17+
fontSize = 5,
18+
}: ComicTextProps) {
19+
if (typeof children !== "string") {
20+
throw new Error("children must be a string");
21+
}
22+
23+
const dotColor = "#EF4444";
24+
const backgroundColor = "#FACC15";
25+
26+
return (
27+
<motion.div
28+
className={cn("select-none text-center", className)}
29+
style={{
30+
fontSize: `${fontSize}rem`,
31+
fontFamily: "'Bangers', 'Comic Sans MS', 'Impact', sans-serif",
32+
fontWeight: "900",
33+
WebkitTextStroke: `${fontSize * 0.35}px #000000`, // Thick black outline
34+
transform: "skewX(-10deg)",
35+
textTransform: "uppercase",
36+
filter: `
37+
drop-shadow(5px 5px 0px #000000)
38+
drop-shadow(3px 3px 0px ${dotColor})
39+
`,
40+
backgroundColor: backgroundColor,
41+
backgroundImage: `radial-gradient(circle at 1px 1px, ${dotColor} 1px, transparent 0)`,
42+
backgroundSize: "8px 8px",
43+
backgroundClip: "text",
44+
WebkitBackgroundClip: "text",
45+
WebkitTextFillColor: "transparent",
46+
...style,
47+
}}
48+
initial={{ opacity: 0, scale: 0.8, rotate: -2 }}
49+
animate={{ opacity: 1, scale: 1, rotate: 0 }}
50+
transition={{
51+
duration: 0.6,
52+
ease: [0.175, 0.885, 0.32, 1.275],
53+
type: "spring",
54+
}}
55+
>
56+
{children}
57+
</motion.div>
58+
);
59+
}

‎registry/registry-examples.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1116,6 +1116,20 @@ export const examples: Registry["items"] = [
11161116
},
11171117
],
11181118
},
1119+
{
1120+
name: "comic-text-demo",
1121+
type: "registry:example",
1122+
title: "Comic Text Demo",
1123+
description: "Example showing comic text animation.",
1124+
registryDependencies: ["https://magicui.design/r/comic-text"],
1125+
files: [
1126+
{
1127+
path: "registry/example/comic-text-demo.tsx",
1128+
type: "registry:example",
1129+
target: "components/comic-text-demo.tsx",
1130+
},
1131+
],
1132+
},
11191133
{
11201134
name: "icon-cloud-demo",
11211135
type: "registry:example",

0 commit comments

Comments
 (0)