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 (scroll-effect, loader, input, 3d-scene, skill)
Mood
Industry
Style
Source repo
- Subscription
Realmagic ticker scroll
Scroll Effect
"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 - 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
Generative mountain scene
3D Scene
Shadcn/Tailwind/TypeScript integration of the brief's `GenerativeMountainScene` — a solid 128² Three.js plane raised into a mountain massif by two octaves of 3D simplex noise in a custom GLSL vertex shader and lit by a fresnel+diffuse fragment shader off a cursor-driven point light — framed as the "ORONOMY" terrain-survey station with a viewfinder stage (corner brackets, scanlines, sweep), freeze-drift + ridge-tint controls, and a live telemetry HUD reading real FPS / survey clock / `time` drift / point-light X·Y·Z straight off the render loop; fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Apex scroll hero
Scroll Effect
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 - 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
Sidi bou said 3d walk
3D Scene
Navigable, fully procedural 3D walk through Sidi Bou Said, Tunisia in a single HTML file.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - scrollytelling agent skill and Claude Code plugin: look at the footage, write beats, scaffold, encode and verify a scroll-scrubbed pageSubscription
scrollytelling agent skill and Claude Code plugin: look at the footage, write beats, scaffold, encode and verify a scroll-scrubbed page
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - scroll-scrub-hero: agent skill that turns one photo (or an idea) into a scroll-scrubbed transformation hero via storyboard, keyframes, Kling tweens and WebP framesSubscription
scroll-scrub-hero: agent skill that turns one photo (or an idea) into a scroll-scrubbed transformation hero via storyboard, keyframes, Kling tweens and WebP frames
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - scroll-reveal-video: skill that re-encodes a video all-I-frame and maps its playback to scroll progress, with timed text overlaysSubscription
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
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 - Subscription
PinnedReveal - Staggered eyebrow → title → summary reveal as a chapter enters view
Scroll Effect
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 - Visual research skill - render real sites and read them as pictures for references and moodboardsSubscription
Visual research skill - render real sites and read them as pictures for references and moodboards
Skill
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 - Exploded view in three.js from markup (parts list as no-JS fallback, or a GLB)Subscription
Exploded view in three.js from markup (parts list as no-JS fallback, or a GLB)
3D Scene
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)Subscription
Dependency-free scroll motion runtime (reveals, scroll-driven animation with IO fallback, magnetic buttons)
Scroll Effect
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: exploded-3d - a made thing taken apart in three.js: parts as shapes and materials, or a GLB; the list is the fallback
3D Scene
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - playwright-cli skill (Microsoft) - drive a real browser from the terminal for agentsSubscription
playwright-cli skill (Microsoft) - drive a real browser from the terminal for agents
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Build cinematic scroll site (continuous-reel scroll-scrub site generator)Subscription
Build cinematic scroll site (continuous-reel scroll-scrub site generator)
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Adaptive mobile strategy (autoplay-loop substitution, scrims, reduced motion)Subscription
Adaptive mobile strategy (autoplay-loop substitution, scrims, reduced motion)
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Scroll-scrub rendering (video.currentTime vs WebCodecs vs image-sequence decision tree)Subscription
Scroll-scrub rendering (video.currentTime vs WebCodecs vs image-sequence decision tree)
Skill
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Portable slash-commands: /cinematic-site (full pipeline) and /storyboardSubscription
Portable slash-commands: /cinematic-site (full pipeline) and /storyboard
Skill
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
Cover Card to Fixed Header - A full-page hero morphs into a compact fixed header
Scroll Effect
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 - Subscription
Fly-in Fly-out Contact List - Rows translate and fade through entry, active, and exit zones as you scroll
Scroll Effect
Bidirectional and continuous.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Stacking Cards - CSS Scroll-Driven Animations fan cards into a deck
Scroll Effect
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 - Subscription
ScrollTrigger Animation - The onEnter / onLeave lifecycle demonstrated with vanilla JS
Scroll Effect
Four scroll trigger zones.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Scrub Animation - Scroll position is the playhead
Scroll Effect
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 - Subscription
Pin Animation - An element freezes in place while the page scrolls beneath it
Scroll Effect
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 - Subscription
Snap Scrolling - CSS scroll-snap-type creates a paginated, magnetic feel
Scroll Effect
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 - Subscription
Scrollytelling - Fractional chapter progress drives continuous depth crossfades across six ocean-layer chapters
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Reveal on Scroll - Seven reveal techniques fired by IntersectionObserver at a configurable trigger line
Scroll Effect
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Stagger Reveal - Groups reveal with cascading delays
Scroll Effect
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 - Subscription
Horizontal Scroll - Vertical scroll translates a horizontal panel strip
Scroll Effect
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