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 (253)Clear filters

Kind (scroll-effect, loader, button, background, input)

Mood

dark (180)light (16)playful (30)calm (199)bold (149)luxury (20)minimal (7)techy (29)organic (145)retro (46)futuristic (19)editorial (9)

Industry

saas (3)ai (6)agency (4)portfolio (6)fashion (1)media (1)general (64)developer-tools (3)

Style (parallax, gradient)

glassmorphism (2)gradient (246)neon (209)monochrome (65)3d (48)illustration (8)photographic (2)typographic (15)parallax (19)particles (65)grain (3)dithered (3)video (16)terminal (6)

Licence

MIT (224)Apache-2.0 (29)CC0-1.0 (3)Unlicense (3)

Source repo

shader-gallery/shaders (106)Jannchie/shader-gradient (32)paper-design/shaders (29)Vidvox/ISF-Files (13)matinmonshizadeh/animation-handbook (12)tsparticles/tsparticles (7)xiyu519/MotionVault (7)ui-layouts/uilayouts (6)codse/animata (5)educlopez/smoothui (4)pulkitxm/claude-directory (4)mrdoob/three.js (3)oframe/ogl (3)superdesigndev/superdesign-prompts (3)fand/vfx-js (2)kokonut-labs/kokonutui (2)ridelink0/ultimate-frontend-skills (2)codrops/3DStackMotion (1)codrops/ColumnScroll (1)codrops/ImageExpansionTypography (1)codrops/OneElementScroll (1)codrops/OnScrollColumnsRows (1)codrops/OnScrollLayoutFormations (1)codrops/OnScrollShapeMorph (1)codrops/ReflectionScroll (1)codrops/Scroll3DGrid (1)codrops/ScrollBasedLayoutAnimations (1)codrops/StickySections (1)codrops/TileScroll (1)cosscom/coss (1)GeoCodeCrafter/stratum-motion (1)MustBeSimo/web-design-studio (1)nateherkai/scroll-craft (1)NicoSKOOL/ai-ranking-scroll-seo (1)studygeorge/parallax-fx (1)uiverse-io/galaxy (1)

Effects folder

Gradients & Mesh (69)Aurora & Light (113)

Page 1 of 6 · 259 items · 48 on this page

2 across

Sticky content switch
Scroll Effect
Subscription
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
Gradient bars background
Background
Subscription
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
Gradient dots background
Background
Subscription
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
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
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
Section: exploded - dark section; layers pull apart on scroll (2D parallax = depth)
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
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
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
Grid / Dot Pattern Parallax - Pattern shifts subtly opposite to mouse movement
Background
Subscription
Depth felt, barely seen.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Synthwave Grid - A perspective grid scrolls toward a glowing sun
Background
Subscription
The retro synthwave horizon.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Plasma Field - Summed sine functions of x, y, and time make a flowing, organic color field
Background
Subscription
The demoscene classic.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
stratum-motion demo
stratum-motion demo
Scroll Effect
Subscription
SSR-safe reveal presets, stagger, parallax, scroll scene and page transition.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
scrollcraft engine (ai-ranking fork): zero-dependency data-sc-* scroll runtime, modified for the SEO build, with 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
ScrollParallax - anything, moved at a given scroll speed (React)
ScrollParallax - anything, moved at a given scroll speed (React)
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Gooey Gradient Background
Gooey Gradient Background
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Light Beam Button
Light Beam Button
Button
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Parallax Stars Background
Parallax Stars Background
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Send halo
Input
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
On-scroll 3D grids
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Alternate column scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Particle fireworks
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Particle black hole
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Curl noise flow
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Ribbon confetti
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Particle cursor trail
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Hyperspace warp
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Digital rain
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Aurora curtain
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Particle flow field
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Shooting stars
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Sparkle AI button
Button
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Kinetic type scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Fluid distortion
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
GPGPU repel particles
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Flowmap water
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Attractor particles
Background
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Rotating grid scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Distorted reflection scroll
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Scroll layout switch
Scroll Effect
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in

Page 1 of 6 · 259 items · 48 on this page