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
Mood
Industry
Style (typographic, gradient)
Source repo
- Subscription
Midnight editorial template
Landing Page
"Midnight" dark brutalist-editorial fashion-studio template — high-contrast white-on-#050505 with a #0a0a0a footer, vendored Bricolage Grotesque (Clash Display stand-in) + Inter, orange/blue blur(120px) mix-blend-screen light leaks, a `mix-blend-mode:difference` fixed nav with a hover-fill contact pill, a 15vw FORM/MATTER hero overlapping a 4:5 grayscale portrait, a 4-up bordered stats grid with staggered reveals, two 12-column sticky-numeral narrative blocks with translate-on-hover Explore arrows, a 21:9 rAF parallax gallery, a two-up 4:3 hover gallery with fading black overlays and rise-up captions, and a footer with a giant clipped ghost wordmark + massive email CTA — all reveal-up on IntersectionObserver with a (0.22,1,0.36,1) easing; fonts and grayscale editorial imagery 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
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
Super design industrial system
Landing Page
"Super Design" warm-industrial design-system template built same-to-same from a superdesign reference — a #EBEBE8 warm-gray base with #18181B foreground and a single #0066FF electric-blue accent, vendored Inter (400/700/900) + Playfair Display italic, a fixed full-page 12-column structural grid of 0.1-opacity hairlines, a 4%-opacity fractal-noise overlay, a sticky 80px blur-backed header with a serif+bold "SuperDESIGN" logo, a split hero pairing a Building/digital/STRUCTURES headline (solid + serif-italic + -webkit-text-stroke) with a 20px-framed grayscale image and a glassmorphism SYSTEM STATUS card with animated progress bars, an 18s blue-star marquee alternating stroke-sans and serif-italic, a 4-row interactive project list with clip-path image reveals + a cursor-following VIEW disc, a scroll-parallax philosophy statement over a 34vw watermark, a 3-column technical journal, and a massive #18181B footer with a 20vw background marquee and a green System Operational pulse; cubic-bezier(0.16,1,0.3,1) easing throughout, fonts + procedural grayscale SVG imagery vendored, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Superdesign editorial grid
Landing Page
Editorial-tech "Superdesign" template built same-to-same from a detailed spec — muted #f7f6f2 paper background, #1c1c1c ink and a forest-green #3d7068 accent, a trio of vendored fonts (Playfair Display serif headers, Space Grotesk body, Space Mono labels), a fixed structural grid (1px verticals at 25/50/75% + a 40px square grid radially masked to fade at the edges), a floating-to-fixed backdrop-blur nav, a 9vw uppercase serif hero with italic #b4b4b4 key words, a hover-to-white 3-column stat grid, a scroll-synced word-by-word "manifesto" opacity reveal, a click-to-expand 01/02/03 workflow with a sticky grayscale-multiply card and a #3b82f6 scan-line bar, pill use-case tabs over a 240px ghost-glyph card, and a bottom-bordered Request Access form — all 1px borders, no shadows, ≤2px radius, easing cubic-bezier(0.16,1,0.3,1).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Superdesign studio editorial
Landing Page
Typography-first black-and-white editorial creative-studio template recreated from a reference — pure #000/#FFF palette with #525252 metadata, vendored Inter + JetBrains Mono, a 32px mix-blend-difference custom cursor that lerp-follows and scales 2.5x on hover, a mix-blend-difference fixed nav with a rotating plus toggle and full-screen clip-path menu, a 12vw "Design Studio" hero with staggered per-letter slide-up reveals, a paused-on-hover asymmetrical-radius project marquee (5/7 grayscale-to-color cards), a centered intro statement, a staggered two-column 4:3 project grid with hover overlays + arrow-up-right badges and mono metadata rows, and a dark #0A0A0A footer with a giant ghosted "sd" watermark; cubic-bezier(0.16,1,0.3,1) easing throughout, fully self-contained offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Synapse design system
Landing Page
"Synapse" futuristic vantablack (#030303) design-system landing built same-to-same from a spec — violet (#8B5CF6) + cyan (#06B6D4) neon accents, vendored Instrument Serif + Inter, three floating blurred ambient orbs, a 672px glass nav pill, a massive centered serif hero with a shimmering gradient last word and staggered load entrances, a Shiny Border Button with a 4s spinning conic-gradient border, a 40s infinite metrics ticker, a 6-card reveal-on-scroll feature grid with violet/cyan hover glows, a syntax-highlighted synapse.config.ts IDE block with a copy button, and an emerald "All Systems Operational" pulsing-dot footer; cubic-bezier(0.23,1,0.32,1) motion throughout, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Vertical clip text slide
Text Effect
A single-screen motion study of a vertical text-clip, letter-by-letter slide-down — each glyph of a giant Space Grotesk headline ("MOTION / IN EVERY / LETTER.") is wrapped in an overflow-hidden vertical clip column and pours down from above (translateY(-110%)→0) with an opacity + blur(6px)→0 settle, staggered 70ms per letter continuously across all lines on a cubic-bezier(.22,1,.36,1) expo-out, then auto-loops with a 2.2s hold and a Replay button; near-black #0b0b0c canvas with off-white #f4f2ec type, JetBrains Mono chrome, a warm #e8552d accent, a 4% fractal-noise grain overlay, and a reduced-motion fallback; fonts vendored, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Crimson press kit h25
Landing Page
Editorial spiral-bound magazine portfolio staged as a crimson brand press kit with print grain, collage cover, and scroll reveals.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Inkpress atelier h46
Landing Page
"Inkpress Atelier" risograph-print graphic-designer portfolio staged as a folded zine — cream paper frame, 4-color registration bar, Anton display type, diamond logo plate, services menu, colored works grid, and scroll reveals.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Meridian drafthouse h54
Landing Page
"Drafting-Table Brutalism" architect & spatial-designer portfolio — warm ecru paper, blueprint grid, hairline frames, highlighter-yellow accent, masked type-rise hero with an outlined italic word, sliding image reveals, count-up stats, and a numbered approach table.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Monogram terminal h42
Landing Page
"Monochrome Terminal Editorial" developer portfolio — strict greyscale void, JetBrains Mono headlines, Merriweather italic accents, terminal-card hero, cross-fading featured slider, work timeline, and paginated articles.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Voltline resume h53
Landing Page
"Voltline" neo-brutalist engineer résumé portfolio — warm cream paper with an orange dot-grid, dual-offset ink/orange borders, hard offset shadows, skewed experience & education bands, count-up hero stats, parallax wedge, and a printable PDF mode.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Crimson mill supply card h61
Card
"Millstone Craft" digital visiting card for a fictional heritage stone-mill flour/grain/spice supplier — a vertical, mobile-first tap-to-contact page stacking a marquee-ticker brand hero, a sage WhatsApp + terracotta Call contact grid, a four-up product showcase, a split flagship-store location card, and an hours/footer strip, each as a soft-shadowed cream card revealed on scroll; warm paper canvas, crimson + wheat-gold accents, condensed Oswald display over Inter Tight, real tel/wa.me/mailto/maps links, fonts and product imagery 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
Gradient bars background
Background
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 - Subscription
Gradient dots background
Background
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 - Subscription
Lumen aurora vcard h62
Card
"Lumen Aurora" personal digital visiting card for a fictional creative technologist — one frosted-glass card floating over a slow living aurora of drifting violet/teal/rose blobs with film-grain and vignette, stacking a meta bar with a live local clock, an avatar-ring hero with a pulsing emerald "available" status, a short first-person bio with mono tag chips, a three-up email/call/WhatsApp action grid, a five-up social row, and an amber "Save contact" button that generates a vCard 3.0 `.vcf` blob client-side plus a "Copy link" toast; cinematic near-black palette, Fraunces display serif over Geist + Geist Mono, pointer parallax with specular sheen, staggered reveal, real mailto/tel/wa.me links, all fonts and portrait 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
Abstract glassy shader
Shader
GLASSWORKS — a drop-in WebGL2 metaball field (two SDF circles fused with a smooth union, an exponential glow and a cosine spectrum) integrated into shadcn `components/ui` and framed as a glass component lab: a live telemetry HUD reading the shader's own blob centres/FPS/clock, a control deck of faders that promote the baked-in constants to live uniforms, copyable source tabs, and a props/uniforms API; fully procedural with a CSS metaball fallback.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Aether flow shader
Shader
Faithful shadcn integration of the **Aether Flow** component — a procedural fractal-noise (fBm) gas rendered on a single full-screen Three.js quad — framed as an *atmosphere synthesizer* console: a left instrument rail of five faders (Hue/Speed/Intensity/Complexity/Warp) wired straight to the shader's `u_*` uniforms, a named patch bank (Nebula/Ember/Abyss/Drift/Solar/Bloom), pointer-driven warp, and a live telemetry strip reading the field's per-frame state back out; fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Animated shader background
Shader
"AnoAI" product hero set over a full-viewport three.js aurora fragment shader, integrated as a shadcn `components/ui` piece, with a graceful CSS-aurora fallback when WebGL is unavailable, vendored Geist font + generated avatar art, and a headless screenshot-based shader verification.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Aurora borealis shader
Shader
"Aurora Watch" field-station console wrapping the brief's verbatim Three.js aurora-borealis shader (an FBM-noise green→violet curtain with a cursor-tracking flare) as a shadcn `@/components/ui` drop-in — a probe reticle tracks the flare as geomagnetic lat/long, and the signature Kp-index gauge (0–9) is driven by the aurora's brightness sampled straight off the GPU, with a CSS-aurora WebGL fallback and fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Blue meshy shader lab
Shader
Faithful shadcn integration of the verbatim WebGL2 "blue meshy" background — a procedural domain-warped fractal-noise (fBm) sea on a single full-screen quad, transparent-compositing through a 20-step blue palette — dropped into `@/components/ui` and framed as a component lab: the live shader as a full-bleed `min-h-screen` hero carrying the shipped "Turning Ideas Into Impact" lockup, then a setup guide, anatomy, a props + shader-constant reference, and a usage gallery; the only deltas to the verbatim file are a valid `join(", ")` and a `cancelAnimationFrame` cleanup for StrictMode safety, fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Blueprint ascii grid shader
Shader
"GRIDLINE" shadcn-style integration of the brief's verbatim WebGL2 `asd.tsx` — a deep-navy four-point mesh-gradient blueprint grid with ASCII glyphs stamped on the major intersections, drift, vignette, value-noise grain and Bayer dithering — dropped into `@/components/ui` and framed as a live instrument: a telemetry HUD (iTime/FPS/iResolution/iMouse), a control deck promoting the shader's baked constants to live uniforms, a per-pixel anatomy walkthrough, and a full shadcn/Tailwind/TS integration story; fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Celestial ink shader
Shader
Verbatim Three.js "Celestial Ink" fragment shader (a rotating six-octave fBm ink field, plum→magenta→gold, that ripples around the cursor) dropped into shadcn `@/components/ui` and framed as an inkstone scrying instrument — a cursor-following astrolabe reticle sights the ripple, a telemetry column reads the shader's own per-frame state (ink time, rotation, ripple coords, fps), and freeze / drift / ripple controls drive the pass; Cormorant Garamond / Inter / JetBrains Mono vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Crystal voronoi shader
Shader
Shadcn-style integration of the prompt's `crystal-shader` (`InteractiveShader`) — a raw-WebGL two-pass warped Voronoi lattice with a cursor repel field, ported to TypeScript and framed as the "Cryolite Lab" crystallography specimen station: a caliper-framed full-viewport shader with a counter-rotating goniometer reticle, live GPU telemetry (FPS, centre-pixel luminance + spectral cast read via `gl.readPixels`), and four calibration faders wiring the brief's `cellDensity`/`animationSpeed`/`warpFactor`/`mouseInfluence` props to live uniforms; zero runtime libs (raw WebGL, no three.js), fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Endless pursuit shader hero
Hero Section
Shadcn/Tailwind v4/TS integration of UIMIX's monochrome "ENDLESS PURSUIT" hero — the pasted component's remote UnicornStudio shader scene is preserved but layered over a dependency-free WebGL fallback field (drifting nebula, an "endless orbit" arc, parallax twinkling stars) with a pure-CSS starfield beneath, so the Sisyphus-themed hero runs fully offline; Next.js `'use client'`/styled-jsx adapted to Vite, JetBrains Mono vendored, Lucide icons.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Fluid swirl shader
Shader
Shadcn/Tailwind/TypeScript integration of the prompt's verbatim `FluidSwirl` raw-WebGL component (three pigments folded into an endless paint vortex on a single full-screen quad) dropped into `@/components/ui`, framed as the "FLUX" pigment-mixing console — the shader's hard-coded uniforms become an additive, backward-compatible props API driving three live colour pickers, contrast/spin/flow/pixel-filter faders, a polar-warp toggle, six paint presets and a randomiser, with pointer/touch steering the spin and a signature pigment-trace oscilloscope reading the field's average luma straight off the framebuffer; fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Grain gradient corners lab
Shader
"GRAINFIELD" — the prompt's verbatim `GradientBackground` (a `@paper-design/shaders-react` `GrainGradient` painting the **corners** shape: two rounded rectangles in warm orange→amber→pink grain on black) dropped into `components/ui`, then wrapped in a parametric `GrainGradientStage` twin so an instrument console can drive the whole uniform surface live — a shape selector across all seven `u_shape` modes (wave·dots·truchet·corners·ripple·blob·sphere), five named palettes, a uniforms deck of faders (softness·intensity·grain·scale·rotation·speed), a Freeze control, a four-tab copyable integration story (component/usage/parametric/setup) and a telemetry strip reading real FPS/clock/frames off a rAF loop; the preserved "Backgrounds are awesome :)" hero floats over it. Fonts vendored locally, CLI-verified headless with a WebGL render check.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Grainy gradient ripple card
Card
Shadcn integration of the brief's verbatim `gradient-shader-card` — a grainy 7-stop gradient (domain-warped value noise + 3D simplex grain + overlay film grain) rendered on a single React-Three-Fiber quad that ripples where you tap it — dropped into `@/components/ui` and framed as the "Chroma Foundry" pigment-lab console: a rail with the exact 7 hex stops the shader mixes, five faders promoting the baked `noise*`/`waveNoise*` constants to live uniforms, named patches (Foundry/Silk/Marble/Static/Tide), click-to-ripple with tactile DOM markers, and a telemetry strip reading the shader's own clock + live ripple count off the GPU loop; fonts vendored locally, headless WebGL + interaction verification (9/9).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Hero dithering card
Call to Action
"DITHER · PRESS" — the brief's `CTASection` dropped **verbatim** into `components/ui`: a transparent-backed `@paper-design/shaders-react` `Dithering` shader laying Pantone-orange ink under an editorial headline, mounted on a print-house "press bed" with crop marks, a rotating registration loupe, a half-tone dot field, and a telemetry strip that samples ink coverage live off the plate; plus an "ink console" whose faders (speed / shape / type / ink) drive a second live `Dithering` instance, a copyable-source integration story, a `Dithering` props table, and a paper ↔ lights-out theme toggle — fonts vendored locally, CLI-verified with a screenshot-diff render check.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Hive noise shader
Shader
"HIVE" — a faithful shadcn integration of the prompt's verbatim `hive.tsx` component, a single full-screen **WebGL2** fragment shader that raymarches a 20-step noise field and tints it with a flowing amber → magenta cosine spectrum; dropped **unedited** into `@/components/ui` (zero props, zero deps, zero assets) and mounted as a fixed full-viewport backdrop under a frosted shader lab: a hero, a spec HUD reading the shader's real shape (its `u_res`/`u_time` uniforms, raymarch steps, DPR clamp) instead of faked telemetry, an integration ticker, and a below-the-fold integration story (default paths, why `components/ui`, from-scratch setup, copyable source, a render-pipeline walkthrough, and a props/state/assets Q&A); CLI-verified with a headless screenshot light-check.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Liquid crystal shader
Shader
Shadcn-style integration of the verbatim raw-WebGL `liquid-crystal` component (simplex-noise interference bands on a single mouse-warped full-screen quad) dropped into `@/components/ui`, framed as a polarized-light optics bench — the prompt's top-left ControlsPanel drives the hue/speed/noise/warp/zoom/brightness uniforms, a crossed-polarizer reticle tracks the mouse-warp centre, an instrument rail reads live FPS/render clock/birefringence off the shader's own per-frame state, and an integration docket documents the drop-in; fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Living nebula shaderSubscription
Living nebula shader
Shader
Shadcn-style integration of the brief's `LivingNebulaShader` — a two-layer fbm gas cloud (magenta plasma + ion-blue) that lenses around the cursor, rendered full-viewport with Three.js and framed as a deep-sky observatory sky-feed console: corner brackets, a scope scanline, a cursor lens reticle, and a live telemetry rail reading the shader's own per-frame state (feed clock, render FPS, and warp coordinates computed with the exact GLSL normalization); fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Mesh gradient shader hero
Hero Section
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 - Subscription
Morphing light shader
Shader
Faithful shadcn integration of the brief's verbatim `MorphingLight` Three.js shader (radially symmetric pink↔cyan morphing interference fringes on one full-screen quad) dropped into `@/components/ui` and reframed as **FRINGE**, a tabletop interferometer — the shader's baked constants (`2.5`/`4.0`/`8.0` + an HSV hue rotation) are promoted to four live "beam" faders, five named emission sources snap the field to stored uniforms, a concentric fringe reticle mirrors the shader's own radial symmetry, a cursor caliper reads fringe order at the optical axis, and a detector strip reads clock/FPS/axis intensity straight off the GPU via `gl.readPixels`; zero-prop `<MorphingLight />` stays byte-for-byte original, fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Novatrix gradient mesh
Shader
Shadcn/Tailwind v4/TypeScript integration of the prompt's `gradient-mesh.tsx` (the Novatrix `ogl` shader) dropped verbatim into `@/components/ui` and framed as the "NOVATRIX Gradient Mesh Lab" — a water-distorted fractal gradient field under the prompt's `mix-blend-overlay` "Gradient Mesh" headline, with a uniform control deck that promotes every baked-in constant (speed/swirl/scale/rotation/wave amp·freq·speed/grain/offsets/distortion) to a live fader, eight curated 3-stop palettes, an independent FPS·frame·clock telemetry HUD with pause-freeze, and a tabbed install / props-API / usage / why-`components/ui` dock; fonts vendored locally, fully procedural (no image assets).
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Paper shader resume hero
Hero Section
Shadcn `components/ui` integration of the prompt's `portfolio-hero-with-paper-shaders` — a split-screen designer résumé (`Jessi.cv`) whose right panel is a live `@paper-design/shaders-react` Dithering canvas with its own internal light/dark toggle — dropped in verbatim and framed as a "darkroom" proof: the as-shipped component sits in a crop-marked plate, an ink console promotes every Dithering prop (shape/bayer-matrix/pxSize/scale/speed/colour pair) to live faders with live prop/fps telemetry, a procedural shader-portrait gallery, and a setup/why-`components/ui`/source/props-API story (the invalid `shape="cat"` is corrected to `sphere`); fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Paper shaders control deck
Shader
Instrument-console "Control Deck" for driving live WebGL shaders — four selectable channels (paper-design Mesh Gradient / Dot Orbit / Combined plus the prompt's custom react-three-fiber GLSL Shader Plane + energy rings), a brushed-graphite scope housing with corner brackets/scanlines/vignette, live FPS·frame·uptime telemetry, and speed/intensity faders wired straight into the shader uniforms.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Paper shaders hero lab
Hero Section
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 - Subscription
Radial shader
Shader
"Radial Bloom" — verbatim shadcn `components/ui` integration of the brief's single-file WebGL2 fragment shader (seven polar-gated rings blooming from one full-screen triangle, each rotating at its own `t·sin(i²)` rate under a phase-shifted cosine palette and a `tanh` tone-map), dropped in unedited and framed as an observatory instrument: the fullscreen component renders as a fixed background under a glass hero lockup, a right-rail telemetry HUD mirrors the shader's own `iTime`/`iFrame`/FPS and per-ring phase, and a scrollable deck documents the shadcn/Tailwind/TypeScript setup, the `components.json` aliases, why `components/ui` matters, the props/uniforms API, and a GLSL anatomy walkthrough; zero image/shader-library dependencies, fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Shader spectral clock
Shader
"SPECTRA CLOCK" integration of the brief's verbatim `shader-clock.tsx` — a raw-WebGL eight-fold cosine/sine domain warp coloured by a wavelength→RGB spectrum, with a live clock, editable location and °C/°F toggle floating over it — dropped into `@/components/ui` and framed as a spectral-field timepiece lab: a frosted clock card over the live field, a telemetry HUD reading the shader's own `iTime`/FPS/centre-pixel colour off the GPU, a control deck promoting the four baked GLSL constants (`for(i<8)`/`p*=2.0`/`p.y*50.0`/`iTime`) to live uniforms, a six-city world-preset bank with locally-generated skyline stills, a Freeze control and a CSS-aurora WebGL fallback; the verbatim `demo.tsx` is embedded untouched and fonts are vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Vitruvian ascii shader
Hero Section
Shadcn/Tailwind v4/TS integration of the prompt's `hero-ascii` "PERFECT PROPORTIONS" hero, with its network-blocked UnicornStudio embed rebuilt as a self-contained HTML-canvas ASCII shader of Da Vinci's Vitruvian Man — bright limbs sweeping between the square and circle poses over a breathing frame, a faint pose-superposition, and a twinkling starfield, under the verbatim UIMIX chrome; JetBrains Mono vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Warp checks background lab
Shader
Shadcn integration of the prompt's `@paper-design/shaders-react` `<Warp shape="checks" />` dropped into `components/ui` (its malformed JSX fixed) and built into a polished, full-viewport animated checks-warp background — one `<Warp>` in a `fixed inset-0 -z-10` layer behind glassy product UI, a live console of faders for every uniform (proportion, softness, distortion, swirl, swirlIterations, shapeScale, scale, rotation, speed), a shape selector and four mood presets, a live-vs-prompt props ledger, an in-page shadcn/Tailwind/TS setup write-up, and an rAF FPS/frame/uptime telemetry strip; boots on the prompt's exact four-colour config, fonts vendored locally.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in - Subscription
Warp shader hero
Hero Section
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 - Subscription
Webgl flowing gradient shader
Shader
Shadcn/Tailwind v4/TS integration of a raw-WebGL flowing-gradient fragment shader, framed as the "PRISMA Shader Lab" — a cursor-reactive fractal field with viewfinder chrome, a layers/glow/speed control rail, and a live FPS/time/resolution telemetry HUD.
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
Aurora flow landing
Design System
"Tide" deep-work-ritual landing page on the exact prompt scaffold (Vite + React + TS, Tailwind + tailwind-merge + clsx, Framer Motion, Lucide, `@/` alias, `cn()`) — a deep oceanic-twilight design whose signature is a full-width canvas "tide of light" (drifting, pointer-leaning sine bands, reduced-motion-safe), a hero that *is* a working focus session (breathing dial + live 50:00 countdown), a soundscape marquee, a 3-step Ritual timeline, a Soundscapes bento, count-up stats, scaled-tier pricing, an ARIA FAQ accordion, and a validating email CTA; vendored Fraunces/Inter/JetBrains Mono, fully offline.
This is part of a CreativePower subscription. Subscribe to see its code and use it in your pages.
Sign in