Imported library
3427 items in the library.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages. Sign in
Kind (text-effect, button, loader, cursor, card, input)
Mood
Industry
Style
Source repo
- Subscription
Vertical clip text slide
Text Effect
A single-screen motion study of a vertical text-clip, letter-by-letter slide-down — each glyph of a giant Space Grotesk headline ("MOTION / IN EVERY / LETTER.") is wrapped in an overflow-hidden vertical clip column and pours down from above (translateY(-110%)→0) with an opacity + blur(6px)→0 settle, staggered 70ms per letter continuously across all lines on a cubic-bezier(.22,1,.36,1) expo-out, then auto-loops with a 2.2s hold and a Replay button; near-black #0b0b0c canvas with off-white #f4f2ec type, JetBrains Mono chrome, a warm #e8552d accent, a 4% fractal-noise grain overlay, and a reduced-motion fallback; fonts vendored, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Crimson mill supply card h61
Card
"Millstone Craft" digital visiting card for a fictional heritage stone-mill flour/grain/spice supplier — a vertical, mobile-first tap-to-contact page stacking a marquee-ticker brand hero, a sage WhatsApp + terracotta Call contact grid, a four-up product showcase, a split flagship-store location card, and an hours/footer strip, each as a soft-shadowed cream card revealed on scroll; warm paper canvas, crimson + wheat-gold accents, condensed Oswald display over Inter Tight, real tel/wa.me/mailto/maps links, fonts and product imagery vendored locally, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Lumen aurora vcard h62
Card
"Lumen Aurora" personal digital visiting card for a fictional creative technologist — one frosted-glass card floating over a slow living aurora of drifting violet/teal/rose blobs with film-grain and vignette, stacking a meta bar with a live local clock, an avatar-ring hero with a pulsing emerald "available" status, a short first-person bio with mono tag chips, a three-up email/call/WhatsApp action grid, a five-up social row, and an amber "Save contact" button that generates a vCard 3.0 `.vcf` blob client-side plus a "Copy link" toast; cinematic near-black palette, Fraunces display serif over Geist + Geist Mono, pointer parallax with specular sheen, staggered reveal, real mailto/tel/wa.me links, all fonts and portrait vendored locally, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Grainy gradient ripple card
Card
Shadcn integration of the brief's verbatim `gradient-shader-card` — a grainy 7-stop gradient (domain-warped value noise + 3D simplex grain + overlay film grain) rendered on a single React-Three-Fiber quad that ripples where you tap it — dropped into `@/components/ui` and framed as the "Chroma Foundry" pigment-lab console: a rail with the exact 7 hex stops the shader mixes, five faders promoting the baked `noise*`/`waveNoise*` constants to live uniforms, named patches (Foundry/Silk/Marble/Static/Tide), click-to-ripple with tactile DOM markers, and a telemetry strip reading the shader's own clock + live ripple count off the GPU loop; fonts vendored locally, headless WebGL + interaction verification (9/9).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Bloom nested squares
Loader
The shadcn "Bloom" NestedSquares component (25 violet-gradient squares scaling and rotating forever via Framer Motion) staged in a dark motion-specimen studio — a graticule plate, ambient glow, and a calibration rail of dials that retune the live component's ring count, period, stagger, growth, spin and culture.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - DepthFigure - A foreground image card held in depthSubscription
DepthFigure - A foreground image card held in depth
Card
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
TiltCard - A card that tilts up to ~8 degrees in 3D toward the pointer with an opacity-only specular sheen
Card
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
KineticHeadline - A heading that splits into per-word, per-line spans which stagger in on transform + opacity as it enters view (split-line-rise vocabulary), reading as one acces
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
MagneticCursor - A custom cursor dot that rAF-lerps toward the pointer and snaps toward real focusable magnetic targets on hover, gated to fine pointers and disabled (native cur
Cursor
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Fill on Scroll - A pinned paragraph fills word by word as you scroll
Text Effect
Pause mid-read, scroll back and it un-reads.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Slide Up Reveal - Text rises from below its clip boundary
Text Effect
TranslateY method vs clip-path inset, identical visual result.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Split Text Reveal - Text split into chars, words, or lines
Text Effect
Each piece staggers with --index CSS transition-delay.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Letter-by-Letter Stagger - CSS transition-delay cascade per letter, or JS typewriter mode with a blinking cursor
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Word-by-Word Reveal - Words animate sequentially at 80–120ms per word
Text Effect
The readable stagger speed for taglines.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Hover State Animation - Six hover techniques side by side
Button
Color shift, scale, lift, underline grow, icon nudge, and background sweep.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Click / Tap Ripple - Ripple emanates from the exact click point
Button
Material Design's tactile confirmation pattern.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Button Press Scale - Scales to 0.95 on press, springs back on release
Button
Asymmetric timing gives a tactile feel.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Magnetic Button - Button leans toward the cursor within a radius, label lagging for parallax
Button
Springs home on exit.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Heart / Like Burst - Tap pops and fills the heart while small hearts burst outward on canvas
Button
Twitter-style like.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Success Confetti - Completing an action fires a canvas confetti burst
Button
Rotating rectangles with gravity and spin.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Skeleton Loader - Pulsing placeholder blocks match the shape of real content
Loader
Reduces perceived wait time.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Shimmer Effect - Gradient sweep over skeleton placeholders
Loader
Gives the impression of data streaming in.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Loading Spinner - Six spinner variants from a single CSS color and speed
Loader
Ring, orbit, arc, bounce, pulse, square.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Progress Animation - Linear bar, circular ring, and stepped segments
Loader
All driven by a single percentage value.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Cursor Follower - Custom element follows mouse with lerp lag
Cursor
Mix-blend-mode: difference inverts any background.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Swipe to Dismiss - Drag a card past a threshold and it flies off as the row collapses
Card
Pointer-driven, touch-ready.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Theme Toggle Morph - A sun morphs into a crescent moon as the interface flips between light and dark
Button
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Copy to Clipboard - The copy button swaps to a checkmark and a Copied confirmation, then reverts after a moment
Button
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Segmented Control - A highlighted pill slides beneath the selected segment as the active label crossfades
Button
The iOS control.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Kinetic Typography - Phrases enter, transform, and exit in a choreographed timeline
Text Effect
Motion reinforces meaning.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Typewriter Effect - Characters appear one at a time with a blinking cursor
Text Effect
Natural timing variance makes it feel human.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scramble / Glitch Text - Characters cycle randomly before locking left-to-right
Text Effect
Decryption and sci-fi aesthetic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Variable Font Morph - CSS font-variation-settings animates weight, slant, and casual axes of a variable font
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Clip-Path Reveal - Lines reveal via expanding clip-path mask
Text Effect
Preserves kerning and typographic spacing exactly.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Marquee / Ticker - Continuous horizontal scroll with seamless loop
Text Effect
Duplicated content makes the reset invisible.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Morphing - One word transitions into another character by character
Text Effect
Each letter slides out as the next slides in.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text Gradient Animation - background-clip: text with animated background-position flows color through the characters
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Outline to Fill - Hollow stroke letterforms fill with color
Text Effect
Clip-path reveal or opacity crossfade.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Enter/Exit Typography - Three-act phrase lifecycle: enter → hold → exit, sequenced for storytelling
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Rotate Word Carousel - One keyword cycles through a list while the surrounding sentence stays static
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Glitch Text - RGB-split copies jitter behind animated clip-path slices
Text Effect
The datamosh / signal-loss aesthetic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Text on a Path - Text flows along an SVG curve via textPath with an animated startOffset
Text Effect
Wave, arc, or circle.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Wavy Text - Per-letter sine-wave bob with a staggered delay sends a wave travelling across the word
Text Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Parallax 3D Tilt - CSS perspective + rotateX/Y follows mouse
Card
A shine highlight tracks the virtual light source.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Glassmorphism Animated - backdrop-filter: blur() over animated gradient blobs
Card
Three frost variants.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Chromatic Aberration - RGB channels offset via mix-blend-mode: screen
Text Effect
Static, pulse, and glitch modes.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
3D Flip Card - A card rotates in 3D to reveal its back face using preserve-3d, perspective, and backface-visibility
Card
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Dashboard cards parallel entranceSubscription
Dashboard cards parallel entrance
Card
@reactzero/flow parallel example (WAAPI).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in