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

Kind (scroll-effect, hero, loader)

hero (46)navbar (1)features (7)testimonials (1)cta (1)footer (1)gallery (2)text-effect (1)background (3)loader (0)scroll-effect (4)3d-scene (2)card (3)form (1)full-page (141)other (4)app-screen (2)

Mood

dark (18)light (28)playful (4)calm (9)bold (11)luxury (6)minimal (11)techy (6)futuristic (3)editorial (15)

Industry

saas (8)ai (2)agency (6)portfolio (5)ecommerce (2)finance (4)health (3)education (1)gaming (1)web3 (1)real-estate (2)food (3)travel (5)fashion (1)media (1)general (12)developer-tools (1)professional-services (3)

Style

glassmorphism (22)brutalist (1)gradient (24)neon (1)monochrome (1)3d (1)photographic (14)typographic (13)bento (1)parallax (7)particles (2)grain (1)terminal (2)

Licence

Source repo

PicartWeb/hero-section-collection (30)pulkitxm/claude-directory (12)ridelink0/ultimate-frontend-skills (6)MustBeSimo/web-design-studio (2)

Page 1 of 2 · 50 items · 48 on this page

2 across

Altitude index h38
Hero Section
Subscription
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
Animated text rotate hero
Hero Section
Subscription
Shadcn/ui animated hero integration with spring word-rotation, hosted in a midnight-teal "Spektr" trade-desk shell with a live ticker.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Helix vault h55
Hero Section
Subscription
"Institutional Crypto Terminal" hero for Helix Vault — emerald blade of light, glass portfolio dashboard mockup with count-up balance, growing bar chart, live ticker and scan-line, all framework-free.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Monocrit studio h27
Hero Section
Subscription
Interactive near-monochrome Swiss-brutalist studio hero with a cursor-following image card, magnetic headline letters, and movement-driven image cycling.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Particle hero
Hero Section
Subscription
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
Prisma noir h52
Hero Section
Subscription
"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
Shape landing hero
Hero Section
Subscription
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
Verdant advisory h10
Hero Section
Subscription
Quiet-luxury advisory hero — oversized forest-green card, Hedvig serif headline, floating glass stat chip, infinite trust marquee, count-up stats and approach cards on a white canvas.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Woven light hero
Hero Section
Subscription
Interactive hero with 50k cursor-reactive Three.js particles woven into a torus-knot tapestry, integrated as a shadcn-style component.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
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
Background paths hero
Hero Section
Subscription
Integration of the "Background Paths" shadcn/ui hero — 72 flowing animated SVG paths behind a per-letter spring headline and a glassy CTA, wrapped in a dark/light theme toggle and a preset-headline switcher.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
VectorMind AI platform hero (dark developer console)
Hero Section
Free sample
Developer portfolio hero (terminal and project showcase)
Hero Section
Free sample
NovaStack modern SaaS startup hero
Hero Section
Free sample
NeuralForge AI platform hero
Hero Section
Free sample
Studio Vanta creative agency hero
Hero Section
Free sample
Maison Aurelia luxury hotel hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Wayfarer Atlas travel agency hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Cinder Table restaurant hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
HavenRow real estate hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Clarity Care medical clinic hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Northbridge Law law firm hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
MintLedger fintech hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Forma Market e-commerce hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Mira Vale portfolio hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
BlackCircuit cyber security hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
PulseArena gaming hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
ForgeFit fitness hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
BrightPath education hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
EchoWave music streaming hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Ironbeam Build construction hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Gatherly event management hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
SignalBloom marketing agency hero
Hero Section
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
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
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
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: hero-photo - full-bleed photograph, centred display type, staggered 2nd line
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: hero-split - type left, object right - the product hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: hero-layered - photograph cut into planes (webdesign.mjs cut); subjects rest on the bottom edge, sky lags, type at page speed
Hero Section
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: hero-gradient - animated WebGL colour field behind the type; no photograph needed
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Section: hero-depth - three photographic planes: background lags, middle at page speed, foreground leads
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
FlowPilot SaaS product hero (product dashboard split)
FlowPilot SaaS product hero (product dashboard split)
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Northstar creative agency hero (editorial asymmetric grid)
Northstar creative agency hero (editorial asymmetric grid)
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Aurelia luxury hotel hero (full-bleed booking)
Aurelia luxury hotel hero (full-bleed booking)
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Atlas & Away travel agency hero (scenic search)
Atlas & Away travel agency hero (scenic search)
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Ember & Sage restaurant hero (editorial menu feature)
Ember & Sage restaurant hero (editorial menu feature)
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
HavenKey real estate hero (property search)
HavenKey real estate hero (property search)
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in

Page 1 of 2 · 50 items · 48 on this page