Imported library

v0.1 · Phase 0

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

Has preview (593)Clear filters

Kind (scroll-effect, loader, background, cursor)

hero (15)navbar (3)cta (1)gallery (2)text-effect (22)background (559)loader (7)cursor (4)scroll-effect (40)3d-scene (9)shader (75)button (10)card (11)form (6)full-page (1)other (22)transition (13)entrance (14)app-screen (1)

Mood

dark (408)light (30)playful (99)calm (374)bold (380)luxury (120)minimal (10)techy (165)organic (440)retro (123)futuristic (2)editorial (2)

Industry

saas (3)general (69)developer-tools (1)

Style

gradient (191)neon (198)monochrome (30)3d (34)illustration (6)photographic (2)typographic (2)parallax (10)particles (39)grain (1)video (4)terminal (4)

Licence

MIT (471)Apache-2.0 (139)

Source repo

shader-gallery/shaders (316)paper-design/shaders (86)angusforbes/swirlfluid (53)Jannchie/shader-gradient (52)matinmonshizadeh/animation-handbook (48)Vidvox/ISF-Files (30)studygeorge/parallax-fx (6)motiondesignlv/ReactZero-flow (5)pulkitxm/claude-directory (4)fand/vfx-js (2)MustBeSimo/web-design-studio (2)ridelink0/ultimate-frontend-skills (2)GeoCodeCrafter/stratum-motion (1)nateherkai/scroll-craft (1)NicoSKOOL/ai-ranking-scroll-seo (1)SyncedCo/synced-motion (1)

Effects folder

Gradients & Mesh (69)Swirls & Fluid (99)Noise, Clouds & Smoke (38)Fire, Plasma & Energy (19)Aurora & Light (113)Liquid, Glass & Metal (53)Particles & Dots (34)Geometric & Patterns (83)3D Shapes & Spheres (31)

Page 1 of 13 · 610 items · 48 on this page

2 across

Dotted surface waves
Background
Subscription
Shadcn/Tailwind v4/TS integration of the verbatim `DottedSurface` component — a full-viewport three.js `Points` lattice (40 × 60 = 2,400 dots) displaced by two crossing sine waves — framed as a quiet "field generator" with a centred Geist Mono lockup + radial glow and a live `next-themes` toggle that flips the dot palette (light dots on dark ↔ dark dots on light) in real time; fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Apex scroll hero
Scroll Effect
Subscription
Apple-product-page-style "Apex" hero whose 5-second F1 sunset film is scroll-scrubbed full-screen (scroll drives `video.currentTime`) with a synced speed/gear telemetry HUD.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Bloom nested squares
Loader
Subscription
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
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
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
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
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
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
Subscription
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 perspective
Three-plane scroll + pointer parallax with depth of field and aerial perspective
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Dependency-free scroll motion runtime (reveals, scroll-driven animation with IO fallback, magnetic buttons)
Dependency-free scroll motion runtime (reveals, scroll-driven animation with IO fallback, magnetic buttons)
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Parallax Depth-of-Field - Five mountain layers translate at different speeds; blur simulates camera depth-of-field
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Parallax Scrolling - Elements move at different speeds
Scroll Effect
Subscription
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
Reverse-Scrolling Columns - A center column scrolls normally while two flanking columns scroll in reverse, looping infinitely
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Cover Card to Fixed Header - A full-page hero morphs into a compact fixed header
Scroll Effect
Subscription
Every visual property scrubbed to a single progress value.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Fly-in Fly-out Contact List - Rows translate and fade through entry, active, and exit zones as you scroll
Scroll Effect
Subscription
Bidirectional and continuous.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Stacking Cards - CSS Scroll-Driven Animations fan cards into a deck
Scroll Effect
Subscription
Per-index sticky offset creates the visible peek tab.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
ScrollTrigger Animation - The onEnter / onLeave lifecycle demonstrated with vanilla JS
Scroll Effect
Subscription
Four scroll trigger zones.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scrub Animation - Scroll position is the playhead
Scroll Effect
Subscription
A flight path doubles as its own timeline, seekable in either direction.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Pin Animation - An element freezes in place while the page scrolls beneath it
Scroll Effect
Subscription
CSS sticky, no JavaScript pinning.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Snap Scrolling - CSS scroll-snap-type creates a paginated, magnetic feel
Scroll Effect
Subscription
Mandatory, proximity, and none compared.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scrollytelling - Fractional chapter progress drives continuous depth crossfades across six ocean-layer chapters
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Reveal on Scroll - Seven reveal techniques fired by IntersectionObserver at a configurable trigger line
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Stagger Reveal - Groups reveal with cascading delays
Scroll Effect
Subscription
Forward, reverse, center-out, and random cascade directions.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Horizontal Scroll - Vertical scroll translates a horizontal panel strip
Scroll Effect
Subscription
A tall pinned section provides the scroll budget.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Sticky Section - The whole section pins while its interior morphs through four states scrubbed to scroll position
Sticky Section - The whole section pins while its interior morphs through four states scrubbed to scroll position
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Counter Animation - Numbers count 0 → target with easing on scroll entry
Scroll Effect
Subscription
Four formats and configurable curve.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Progress Bar - Reading progress in three styles
Scroll Effect
Subscription
Top bar, circular ring, and side rail — driven by scrollTop / scrollHeight.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section Wipe - The next section slides over the current via sticky z-index stacking
Scroll Effect
Subscription
Scale-down adds depth.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Zoom Into Image - clip-path expands from a framed card to full-bleed as you scroll
Scroll Effect
Subscription
The portal effect.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Smooth (Inertia) Scroll - Wheel and touch input eased toward a target each frame
Scroll Effect
Subscription
Weighted, gliding momentum instead of native jumps.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll Velocity Skew - Content shears with scroll speed and springs straight when you stop
Scroll Effect
Subscription
Motion mapped to velocity, not position.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
SVG Line Draw on Scroll - A winding route draws itself down the page via stroke-dashoffset, passing waypoints as you travel
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll-Driven Background Color - The background blends between section palettes as you scroll, flipping text contrast on light stops
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Skeleton Loader - Pulsing placeholder blocks match the shape of real content
Loader
Subscription
Reduces perceived wait time.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Shimmer Effect - Gradient sweep over skeleton placeholders
Loader
Subscription
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
Loading Spinner - Six spinner variants from a single CSS color and speed
Loader
Subscription
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
Progress Animation - Linear bar, circular ring, and stepped segments
Loader
Subscription
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
Cursor Follower - Custom element follows mouse with lerp lag
Cursor
Subscription
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
Scroll-Driven 3D Rotation - CSS cube rotates through four choreographed stages as you scroll
Scroll Effect
Subscription
The Apple product-page pattern.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Canvas Particle Effect - 500 drifting particles with O(n²) proximity connections and mouse repel/attract on 2D canvas
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Noise-Based Motion - Simplex noise drives a wind field and a morphing blob
Background
Subscription
Smooth random, not chaotic random.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Animated Gradient Background - CSS gradient shifts hue and position continuously
Background
Subscription
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
Mesh Gradient Animation - Blurred radial gradient blobs drift slowly
Background
Subscription
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
Aurora / Northern Lights - Tall color bands drift and skew horizontally
Background
Subscription
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
Grain / Film Noise Overlay - Animated noise at 5–10% opacity adds cinematic warmth
Background
Subscription
Subtlety is everything.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scanline Effect - CRT horizontal lines with optional sweep beam, curvature, and phosphor glow
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Light Leak - Warm gradient fires at random irregular intervals
Background
Subscription
Analog film camera aesthetic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Starfield / Space Particles - Stars drift outward from center with parallax depth
Background
Subscription
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
Breathing / Pulsing Glow - Radial glow expands and contracts on a 5-second breath cycle
Background
Subscription
Calm resting state.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Ambient Ripple Effect - Concentric rings emit periodically from idle sources
Background
Subscription
Passive atmosphere, not click-driven.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in

Page 1 of 13 · 610 items · 48 on this page