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, button, scroll-effect, 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
Sticky content switch
Scroll Effect
Scroll-driven "sticky content switch" editorial template — a warm paper (#f4f1ea) / near-black (#0e0e0c) two-column section on vendored Anton + Inter with a burnt-orange (#c4622d) accent, where the left column is position:sticky and vertically pinned while six 100vh image panels scroll past on the right; an IntersectionObserver with a -50%/-50% rootMargin band fires exactly when each image's midpoint crosses screen center, crossfading + slide-swapping the pinned heading (index, kicker, title, body, meta) to match the active frame, a transform:scaleY accent progress rail with growing ticks, a rAF parallax that scales each image 1.08→1.0 toward center plus grayscale-to-color on active, a per-letter hero rise-reveal, and a ghosted-wordmark outro; six themed procedural SVG images + fonts vendored, fully offline, responsive stacked feed under 900px, respects prefers-reduced-motion.
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 - Subscription
scrollcraft engine: zero-dependency scroll runtime driven by data-sc-* attributes (scrub video, pin, pan, flow acts; cues, drift, magnet), with a template page
Scroll Effect
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
MorphBackground - A scroll chapter whose background morphs between a warm and a cool palette by crossfading two stacked full-bleed gradient layers via opacity
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Three-plane scroll + pointer parallax with depth of field and aerial perspectiveSubscription
Three-plane scroll + pointer parallax with depth of field and aerial perspective
Scroll Effect
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: exploded - dark section; layers pull apart on scroll (2D parallax = depth)
Scroll Effect
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
Parallax Depth-of-Field - Five mountain layers translate at different speeds; blur simulates camera depth-of-field
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Parallax Scrolling - Elements move at different speeds
Scroll Effect
Background slower, foreground faster — creating a 3D depth illusion.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Reverse-Scrolling Columns - A center column scrolls normally while two flanking columns scroll in reverse, looping infinitely
Scroll Effect
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