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 (toggle, loader, input, button, hero, background)
Mood
Industry
Style (parallax, gradient)
Source repo
Effects folder
- Subscription
Altitude index h38
Hero Section
Editorial expedition-outfitter bento hero ("Warm Cartography") on warm paper with an ember accent, parallax photo tiles, fullscreen menu, and a scrolling coordinate ticker.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Particle hero
Hero Section
Night-sky particle-canvas hero with a clickable gold-mode invert toggle, rotating spotlights, and a radial-reveal headline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Prisma noir h52
Hero Section
"Spectral darkroom" creative-director hero with drifting screen-blended color blobs, a clipped rotating-word headline, cursor parallax, and a fullscreen discover menu with hover image tickers.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Shape landing hero
Hero Section
Shadcn integration of Kokonut UI's HeroGeometric — animated geometric shapes, gradient headline and a live props playground on a near-black canvas.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Gradient bars background
Background
Shadcn/ui integration of the verbatim `GradientBars` component — an equalizer-shaped wall of pulsing vertical CSS `linear-gradient` bars (U-shaped height curve, staggered `scaleY` `@keyframes`) — dropped into `@/components/ui` and framed as a component lab: a full-bleed live hero with a render-FPS/bars/assets/uptime telemetry strip and stack ticker, a control deck of faders wired to the real props (numBars/animationDuration + gradientFrom colour picker with named presets + backgroundColor) with a live-usage snippet, a shadcn-CLI integration story explaining the default paths and why `/components/ui` matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero image assets (pure CSS keyframes), fonts 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
Gradient dots background
Background
Shadcn/ui integration of the verbatim `GradientDots` component — a hue-cycling hexagonal CSS `radial-gradient` dot field looped with framer-motion — dropped into `@/components/ui` and framed as a component lab: a full-bleed live hero (the verbatim demo) with a render-FPS/uptime telemetry strip, a control deck of faders wired straight to the real props (dotSize/spacing/duration/colorCycleDuration + a background colour control) with named presets and a live-usage snippet, a four-step shadcn-CLI integration story explaining the default paths and why `/components/ui` matters, and a props API with the prompt's data/state/assets/responsive/placement Q&A; zero component assets (pure CSS), fonts 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
Hero futuristic webgpu
Hero Section
Faithful shadcn integration of the **Hero Futuristic** component — a depth-mapped portrait dissolved into a scanning **dot-matrix** field, rendered through a **Three.js WebGPU** pipeline written entirely in **TSL**: a colour texture + companion depth map drive a node material that parallax-shifts the image by the cursor, masks it into cellular-noise dots, and sweeps a depth-driven reveal, then a TSL post pass adds **bloom** + a travelling red scan line; headline reveals word-by-word over the top. Async-renderer `gl` callback (WebGPU → WebGL2 fallback) needs @react-three/fiber v9; texture, depth map and fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Mesh gradient shader hero
Hero Section
Shadcn-style integration of the prompt's `HeroSection` — a hero whose background is a flowing `@paper-design/shaders-react` MeshGradient under a frosted veil — dropped verbatim into `@/components/ui` and framed as a warm "palette studio": the live hero sits in a registration-bracketed plate while a control deck drives the shader's real props (color stops, distortion, swirl, speed, offsetX) in real time, with light/dark veil toggle, FPS·frame·uptime telemetry, and a tabbed install / props-API / live-usage / why-`components/ui` dock; Onest vendored locally as the Satoshi substitute.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Paper shaders hero lab
Hero Section
Shadcn integration of the 21st.dev "Beautiful Shader Experiences" hero (two stacked `@paper-design/shaders-react` `MeshGradient` layers + a rainbow `PulsingBorder` ring with orbiting marquee), copied verbatim into `components/ui` and framed as a dark instrument console — a Showcase/Lab view toggle, a control deck promoting the baked-in shader constants to live `config`/`pulse` uniforms (colour stops, base/wire speed, distortion, swirl, wire opacity, wireframe, pulse speed/glow), a telemetry HUD whose colour chip is sampled straight off the live shader canvas, and an install / props / why-`components/ui` / responsive dock; module-augmented types keep the drop-in byte-for-byte, fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Warp shader hero
Hero Section
Shadcn-style integration of the prompt's verbatim `@paper-design/shaders-react` `<Warp>` hero dropped into `components/ui`, framed as the "Paper Warp // Shader Lab" — a brushed-graphite instrument deck where the same hero becomes a live specimen: a parameter bay of faders promotes every Warp uniform (swirl, distortion, scale, rotation…) to a live control, a shape selector and four mood presets re-work the field, an editable four-stop palette, and an FPS/frame/uptime telemetry strip; fonts vendored locally.
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 - Subscription
Maison Aurelia luxury hotel hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Wayfarer Atlas travel agency hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Cinder Table restaurant hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
HavenRow real estate hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Clarity Care medical clinic hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Northbridge Law law firm hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
MintLedger fintech hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Forma Market e-commerce hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Mira Vale portfolio hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
BlackCircuit cyber security hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
PulseArena gaming hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
ForgeFit fitness hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
BrightPath education hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
EchoWave music streaming hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Ironbeam Build construction hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Gatherly event management hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
SignalBloom marketing agency hero
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - HeroParallax - A hero "tracking shot" whose graded depth planes (far/back/mid/near) translate at different scroll rates so the frame reads as deep space, with a split-line titSubscription
HeroParallax - A hero "tracking shot" whose graded depth planes (far/back/mid/near) translate at different scroll rates so the frame reads as deep space, with a split-line tit
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Section: hero-layered - photograph cut into planes (webdesign.mjs cut); subjects rest on the bottom edge, sky lags, type at page speed
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Section: hero-gradient - animated WebGL colour field behind the type; no photograph needed
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Section: hero-depth - three photographic planes: background lags, middle at page speed, foreground leads
Hero Section
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Animated Gradient Background - CSS gradient shifts hue and position continuously
Background
Pure CSS, no JavaScript, seamless loop.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Mesh Gradient Animation - Blurred radial gradient blobs drift slowly
Background
Organic color washes popularized by Stripe.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Aurora / Northern Lights - Tall color bands drift and skew horizontally
Background
Heavy blur fakes the curtain of light.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Light Leak - Warm gradient fires at random irregular intervals
Background
Analog film camera aesthetic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Starfield / Space Particles - Stars drift outward from center with parallax depth
Background
Slow ambient speed, never hyperspace.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Breathing / Pulsing Glow - Radial glow expands and contracts on a 5-second breath cycle
Background
Calm resting state.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Grid / Dot Pattern Parallax - Pattern shifts subtly opposite to mouse movement
Background
Depth felt, barely seen.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Synthwave Grid - A perspective grid scrolls toward a glowing sun
Background
The retro synthwave horizon.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Plasma Field - Summed sine functions of x, y, and time make a flowing, organic color field
Background
The demoscene classic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Parallax heroSubscription
Parallax hero
Hero Section
@reactzero/flow scroll example (WAAPI).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Gooey Gradient BackgroundSubscription
Gooey Gradient Background
Background
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Light Beam ButtonSubscription
Light Beam Button
Button
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Parallax Stars BackgroundSubscription
Parallax Stars Background
Background
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in