Components

Creative Text

Advanced typography effects for impactful headlines and data displays.

Matrix Scramble (Cyberpunk)

Decrypt Speed (ms)50ms

<ScrambleText 
    text="SYSTEM_INITIALIZED" 
    scrambleSpeed={50} 
    className="font-mono text-green-500"
/>

Elastic Hover

StretchMe!

Hover over individual characters to trigger a physics-based stretch animation. Useful for heavy, playful headlines.

import { ElasticText } from "@/components/CreativeText";

<ElasticText 
    text="Stretch Me!" 
    className="text-6xl font-bold" 
/>

Perspective Depth

DEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTH

Depth Layers10

<Text3D 
    text="DEPTH" 
    depth={10} 
    className="text-6xl text-white" 
/>

Infinite Marquee

BREAKING NEWS • LATEST UPDATE • STARTUP LAUNCH • BREAKING NEWS • LATEST UPDATE • STARTUP LAUNCH • BREAKING NEWS • LATEST UPDATE • STARTUP LAUNCH • BREAKING NEWS • LATEST UPDATE • STARTUP LAUNCH •

Duration (s)20s

Higher duration = Slower speed.

<SimpleMarquee 
    text="YOUR SCROLLING TEXT HERE • " 
    speed={20} 
    className="text-2xl font-bold" 
/>

Components

Creative Text

Advanced typography effects for impactful headlines and data displays.

Matrix Scramble (Cyberpunk)

Decrypt Speed (ms)50ms

<ScrambleText 
    text="SYSTEM_INITIALIZED" 
    scrambleSpeed={50} 
    className="font-mono text-green-500"
/>

Elastic Hover

StretchMe!

Hover over individual characters to trigger a physics-based stretch animation. Useful for heavy, playful headlines.

import { ElasticText } from "@/components/CreativeText";

<ElasticText 
    text="Stretch Me!" 
    className="text-6xl font-bold" 
/>

Perspective Depth

DEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTH

Depth Layers10

<Text3D 
    text="DEPTH" 
    depth={10} 
    className="text-6xl text-white" 
/>

Infinite Marquee

Duration (s)20s

Higher duration = Slower speed.

<SimpleMarquee 
    text="YOUR SCROLLING TEXT HERE • " 
    speed={20} 
    className="text-2xl font-bold" 
/>

Frame

Creative Text

Matrix Scramble (Cyberpunk)

Elastic Hover

Perspective Depth

DEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTH

Infinite Marquee

Creative Text

Matrix Scramble (Cyberpunk)

Elastic Hover

Perspective Depth

DEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTHDEPTH

Infinite Marquee