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

Kind (cursor, button, loader, input, tool, table, scroll-effect, features)

Mood

dark (93)light (65)playful (18)calm (11)bold (80)luxury (1)minimal (125)techy (10)retro (2)futuristic (14)editorial (20)

Industry

saas (11)ai (6)agency (8)portfolio (8)ecommerce (3)finance (3)food (1)fashion (1)media (3)general (272)developer-tools (8)

Style

glassmorphism (4)gradient (36)neon (2)monochrome (26)3d (8)illustration (8)photographic (5)typographic (15)bento (2)parallax (15)particles (5)grain (1)dithered (1)video (18)terminal (2)

Licence

MIT (300)CC0-1.0 (8)Unlicense (1)

Source repo

uiverse-io/galaxy (83)matinmonshizadeh/animation-handbook (39)xiyu519/MotionVault (36)cosscom/coss (16)educlopez/smoothui (14)shadcn-ui/ui (11)ridelink0/ultimate-frontend-skills (9)untitleduico/react (9)superdesigndev/superdesign-prompts (8)studygeorge/parallax-fx (7)ui-layouts/uilayouts (7)chakra-ui/zag (6)mantinedev/ui.mantine.dev (6)pulkitxm/claude-directory (6)motiondesignlv/ReactZero-flow (5)tremorlabs/tremor-blocks (5)codse/animata (4)MustBeSimo/web-design-studio (4)kokonut-labs/kokonutui (2)tangyistudio/scroll-frame-sequence (2)Black-Line-Ops/scroll-scrub-hero (1)codrops/3DStackMotion (1)codrops/ColumnScroll (1)codrops/GooeyCursor (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)dimeloper/motion-site-kit (1)GeoCodeCrafter/stratum-motion (1)imMamdouhaboammar/creative-agent-pack (1)JasonOracle/agnes-scroll-world (1)MarchalMaxim/scroll-sequence (1)mariozenmedina/frame-by-frame (1)nateherkai/scroll-craft (1)NicoSKOOL/ai-ranking-scroll-seo (1)oframe/ogl (1)prantikmedhi/scroll-earth (1)shoelace-style/webawesome (1)SyncedCo/synced-motion (1)SyntaxUI/syntaxui (1)tech-maxara/cineritual (1)TommyChryst/claude-web-animations (1)yojahny55/cinematic-scroll-kit (1)

Page 1 of 7 · 309 items · 48 on this page

2 across

Realmagic ticker scroll
Scroll Effect
Subscription
"Real Magic" Coca-Cola-flavored horizontal ticker-tape scroll built with GSAP ScrollTrigger — one continuous sentence ("In every bottle, discover the undeniable Real Magic of sharing pure Refreshment that brings us Together") laid out in a single nowrap flex line on a flat #f40009 red stage, read sideways as the pinned viewport scrubs the line horizontally (travel = scrollWidth − vw, end +=travel×1.15, scrub 0.6). Heavy Anton uppercase words alternate with faint italic Instrument-Serif connectives and outlined-stroke accent words (Magic/Together), with inline currentColor SVG glyphs (bottle, rising carbonation bubbles, signature ribbon swoosh, droplet, clinking bottles, heart full-stop) embedded like punctuation with variable per-item margins; idle looping glyph micro-motion, accent depth parallax, a cream scroll-progress bar, grain + vignette overlays, and an "Open happiness." outro after the pin releases. GSAP + 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
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
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
Canvas scroll-scrub frame-sequence player: sticky stage, drop-in contract (frames + config.js) and wiring guide
Canvas scroll-scrub frame-sequence player: sticky stage, drop-in contract (frames + config.js) and wiring guide
Scroll Effect
Free sample
scroll-reveal-video: skill that re-encodes a video all-I-frame and maps its playback to scroll progress, with timed text overlays
scroll-reveal-video: skill that re-encodes a video all-I-frame and maps its playback to scroll progress, with timed text overlays
Scroll Effect
Subscription
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
PinnedReveal - Staggered eyebrow → title → summary reveal as a chapter enters view
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
ScrubVideo - A scroll-scrubbed <video> whose currentTime is driven by scroll progress (rAF, requestVideoFrameCallback when available) inside a pinned stage, degrading on iOS
Scroll Effect
Free sample
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
Section: blueprint - hand-drawn technical SVG + copy. Replace the path with the real object.
Features
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
Section: stats - two or three numerals in the display face
Features
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: cards-rail - frosted cards on a photographic ground
Features
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: services - hairline-separated rows; the editorial answer to a card grid
Features
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: steps - numbered process, 01 / 02 / 03 - only if order really matters
Features
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: spec - specification table
Features
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
ffmpeg helpers: stage AI clips, all-keyframe encode, 9:16 mobile reframe
ffmpeg helpers: stage AI clips, all-keyframe encode, 9:16 mobile reframe
Tool
Free sample
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
Scroll Image Sequence - A canvas pinned with sticky; scroll progress maps to a frame index
Scroll Effect
Free sample
The Apple product-scroll technique, frames drawn procedurally.
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
Hover State Animation - Six hover techniques side by side
Button
Subscription
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
Click / Tap Ripple - Ripple emanates from the exact click point
Button
Subscription
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
Button Press Scale - Scales to 0.95 on press, springs back on release
Button
Subscription
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

Page 1 of 7 · 309 items · 48 on this page