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 (button, loader, menu, hero)

Mood

dark (24)light (20)playful (5)calm (7)bold (13)luxury (2)minimal (7)techy (6)futuristic (10)editorial (6)

Industry

saas (7)ai (4)agency (5)portfolio (4)ecommerce (1)finance (1)health (2)education (1)gaming (1)real-estate (1)food (2)travel (3)media (1)general (16)developer-tools (3)professional-services (2)

Style (parallax, gradient)

glassmorphism (24)brutalist (1)gradient (40)neon (8)monochrome (22)3d (5)illustration (1)photographic (15)typographic (18)bento (1)parallax (7)particles (8)grain (2)dithered (3)video (1)terminal (5)

Licence

MIT (45)CC0-1.0 (1)

Source repo

PicartWeb/hero-section-collection (20)pulkitxm/claude-directory (9)codse/animata (3)ridelink0/ultimate-frontend-skills (3)ui-layouts/uilayouts (3)codrops/ImageTilesMenu (1)educlopez/smoothui (1)motiondesignlv/ReactZero-flow (1)MustBeSimo/web-design-studio (1)shuding/cobe (1)superdesigndev/superdesign-prompts (1)uiverse-io/galaxy (1)xiyu519/MotionVault (1)

Page 1 of 1 · 46 items

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
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
Hero futuristic webgpu
Hero Section
Subscription
Faithful shadcn integration of the **Hero Futuristic** component — a depth-mapped portrait dissolved into a scanning **dot-matrix** field, rendered through a **Three.js WebGPU** pipeline written entirely in **TSL**: a colour texture + companion depth map drive a node material that parallax-shifts the image by the cursor, masks it into cellular-noise dots, and sweeps a depth-driven reveal, then a TSL post pass adds **bloom** + a travelling red scan line; headline reveals word-by-word over the top. Async-renderer `gl` callback (WebGPU → WebGL2 fallback) needs @react-three/fiber v9; texture, depth map and fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Mesh gradient shader hero
Hero Section
Subscription
Shadcn-style integration of the prompt's `HeroSection` — a hero whose background is a flowing `@paper-design/shaders-react` MeshGradient under a frosted veil — dropped verbatim into `@/components/ui` and framed as a warm "palette studio": the live hero sits in a registration-bracketed plate while a control deck drives the shader's real props (color stops, distortion, swirl, speed, offsetX) in real time, with light/dark veil toggle, FPS·frame·uptime telemetry, and a tabbed install / props-API / live-usage / why-`components/ui` dock; Onest vendored locally as the Satoshi substitute.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Paper shaders hero lab
Hero Section
Subscription
Shadcn integration of the 21st.dev "Beautiful Shader Experiences" hero (two stacked `@paper-design/shaders-react` `MeshGradient` layers + a rainbow `PulsingBorder` ring with orbiting marquee), copied verbatim into `components/ui` and framed as a dark instrument console — a Showcase/Lab view toggle, a control deck promoting the baked-in shader constants to live `config`/`pulse` uniforms (colour stops, base/wire speed, distortion, swirl, wire opacity, wireframe, pulse speed/glow), a telemetry HUD whose colour chip is sampled straight off the live shader canvas, and an install / props / why-`components/ui` / responsive dock; module-augmented types keep the drop-in byte-for-byte, fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Warp shader hero
Hero Section
Subscription
Shadcn-style integration of the prompt's verbatim `@paper-design/shaders-react` `<Warp>` hero dropped into `components/ui`, framed as the "Paper Warp // Shader Lab" — a brushed-graphite instrument deck where the same hero becomes a live specimen: a parameter bay of faders promotes every Warp uniform (swirl, distortion, scale, rotation…) to a live control, a shape selector and four mood presets re-work the field, an editable four-stop palette, and an FPS/frame/uptime telemetry strip; fonts vendored locally.
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
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
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-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: 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
Parallax hero
Parallax hero
Hero Section
Subscription
@reactzero/flow scroll example (WAAPI).
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
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
Globe showcase switcher
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Shape-shifter hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Split shutter preloader
Loader
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Image tiles menu
Menu
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Floating-icon hero
Hero Section
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Terminal intro
Loader
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Curtain preloader
Loader
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Terminal Shimmer Progress Loader
Loader
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Fuzzy rabbit button
Button
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in
Rainbow border button
Button
Subscription
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in

Altitude index h38

Particle hero

Prisma noir h52

Shape landing hero

Hero futuristic webgpu

Mesh gradient shader hero

Paper shaders hero lab

Warp shader hero

Bloom nested squares

NovaStack modern SaaS startup hero

NeuralForge AI platform hero

Studio Vanta creative agency hero

Maison Aurelia luxury hotel hero

Wayfarer Atlas travel agency hero

Cinder Table restaurant hero

HavenRow real estate hero

Clarity Care medical clinic hero

Northbridge Law law firm hero

MintLedger fintech hero

Forma Market e-commerce hero

Mira Vale portfolio hero

BlackCircuit cyber security hero

PulseArena gaming hero

ForgeFit fitness hero

BrightPath education hero

EchoWave music streaming hero

Ironbeam Build construction hero

Gatherly event management hero

SignalBloom marketing agency hero

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

Section: hero-layered - photograph cut into planes (webdesign.mjs cut); subjects rest on the bottom edge, sky lags, type at page speed

Section: hero-gradient - animated WebGL colour field behind the type; no photograph needed

Section: hero-depth - three photographic planes: background lags, middle at page speed, foreground leads

Parallax hero

Light Beam Button

Sparkle AI button

Globe showcase switcher

Shape-shifter hero

Split shutter preloader

Image tiles menu

Floating-icon hero

Terminal intro

Curtain preloader

Terminal Shimmer Progress Loader

Fuzzy rabbit button

Rainbow border button