Editorial expedition-outfitter bento hero ("Warm Cartography") on warm paper with an ember accent, parallax photo tiles, fullscreen menu, and a scrolling coordinate ticker.

Shadcn/ui animated hero integration with spring word-rotation, hosted in a midnight-teal "Spektr" trade-desk shell with a live ticker.

"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.

Interactive near-monochrome Swiss-brutalist studio hero with a cursor-following image card, magnetic headline letters, and movement-driven image cycling.

Night-sky particle-canvas hero with a clickable gold-mode invert toggle, rotating spotlights, and a radial-reveal headline.

"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.

Shadcn integration of Kokonut UI's HeroGeometric — animated geometric shapes, gradient headline and a live props playground on a near-black canvas.

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.

Interactive hero with 50k cursor-reactive Three.js particles woven into a torus-knot tapestry, integrated as a shadcn-style component.

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.

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.

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.

"Wavelength" integration of the prompt's `HeroWave` AI-input hero (a Three.js + GSAP wavefield of up to 256 instanced, 23.4°-skewed bars driven by two keyframed sine waves, lit with an UnrealBloom pass and a custom film-grain ShaderPass, glowing under the cursor) dropped into `@/components/ui` with its `mini-navbar` dependency — the verbatim component's self-typing "Make me a…" prompt box sits over the canvas, framed by a live FPS/uptime HUD, an `onPromptSubmit` toast, and a shadcn/Tailwind/TypeScript install + props story; fonts vendored locally.

"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.

"Emberfield" showcase for a reusable WebGL2 animated shader hero (drifting fractal ember field by @atzedent) — a single drop-in `@/components/ui` component with a live uniforms HUD, pointer-reactive canvas, and a shadcn/Tailwind/TypeScript integration story; fonts vendored locally.

Shadcn/Tailwind/TypeScript integration of the `AnomalousMatterHero` — a simplex-noise-displaced Three.js icosahedron wireframe with a fresnel rim glow and a cursor-tracked point light, framed as a "containment lab" specimen: faders wired straight into the displacement/glow/speed uniforms, a live "anomaly energy" telemetry panel that reads center-pixel luminance off the GPU, plus a reticle scope and corner brackets; fonts vendored locally.

Shadcn-style integration of the prompt's `ShaderDemo_ATC` "ATC one-liner" — a single WebGL2 fullscreen fragment shader ray-marching a cosine-folded chromatic warp tunnel — dropped into `@/components/ui` and framed as an "Aperture Transit Corridor" instrument: a vertical depth gauge whose reticle rides the shader's own marching clock, a chromatic-split wordmark, a hold/resume control wired to the shader's `paused` prop, and a telemetry rail reading real per-frame depth + FPS off the GPU loop; fonts vendored locally.

Shadcn-style integration of the brief's verbatim `AuraCore` WebGL2 energy-core shader (inlined-OGL renderer, HSV core with ten rotating rays, fbm-distorted surface, cursor-reactive particle field) dropped into `@/components/ui`, framed as a plasma-containment console — the component's four sliders become reactor field controls, four named profiles snap the shader to regimes, and a telemetry deck reads containment integrity / excitation straight off the GPU clock with a freeze control; fonts vendored locally.

"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.

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.

"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.

"VAULTWORK · Cathedral of Light" — the prompt's verbatim WebGL2 volumetric ray-march (a 50-step fragment shader that folds a vaulted nave of leaded, sine-rainbow light) dropped unchanged into shadcn `@/components/ui` and framed by a thin `CathedralStage` wrapper that keeps the exact `mainImage` body while promoting its hidden knobs (pixelRatio / timeScale / paused / exposure) to props and reading center-pixel luminance off the GPU; the chrome is a cathedral-light analysis bench with gothic tracery, named light regimes, a brass control deck, a pointer-tracking rose-window reticle, and a GPU-sampled telemetry strip (nave clock, FPS, dominant stained-glass channel); fonts vendored locally, zero image assets.

Procedural GLSL "Celestial Bloom" fragment shader — a five-petalled nebula with a glowing star core and twinkling field, rendered full-viewport with Three.js and framed as an observatory specimen plate with reticle corners, a Fraunces hero lockup, and a live telemetry HUD (mission clock, render FPS, petals) driven by the shader's own per-frame state; fonts vendored locally.

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.

Shadcn-style integration of the verbatim Three.js "Celestial Matrix" shader (blue-to-green digital rain bent around a cursor-driven gravitational warp) dropped into `@/components/ui`, framed as a deep-space signal console — a cursor reticle tracks the warp center while live readouts report render rate, feed time, and warp coordinates; freeze/recalibrate controls drive the shader clock, fonts vendored locally.

Shadcn-style integration of the verbatim Three.js "Celestial Matrix" shader (blue-to-green digital rain bent around a cursor-driven gravitational warp) dropped into `@/components/ui`, reframed as "Meridian Station · Orbital Relay 9" — a retro-CRT relay terminal that types a boot/login handshake over the live feed and lands on ACCESS GRANTED; a cursor reticle marks the warp lock and a bottom telemetry strip (feed clock, warp x·y, render rate, carrier state) is sampled straight off the GPU loop; freeze/recalibrate controls drive the shader clock, fonts vendored locally.

Shadcn-style integration of the verbatim Three.js "Celestial Sphere" shader (a cursor-warped fractal-noise nebula over a twinkling star field on one full-screen quad) dropped into `@/components/ui`, framed as the `VANTA-IX` deep-field navigation console — a cursor-tracking gimbal reticle and a warp vector visualise the exact `u_mouse` shift the shader applies, live telemetry reads feed time / FPS / warp x·y / hue, and four faders promote the brief's props (hue, speed, zoom, particleSize) to live GPU uniforms; fonts vendored locally.

Shadcn integration of the brief's verbatim OGL `PlasmaWeb` shader (a layered plasma lattice of pulsing nodes, curl-flowed connective streams and excited particles that bends toward the cursor) dropped into `@/components/ui` and framed as a cursor-driven "field resonance console" — a 60fps cursor-tracking reticle stands in for the pointer (so the interaction reads in the silent recording), faders re-drive the shader's hue/density/glow/attraction/energy props live, named presets snap the lattice between regimes, and a telemetry panel reads render FPS / cursor x·y / an engagement signal off the loop; fonts vendored locally.

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.

Shadcn-style integration of the verbatim WebGL "Crystalline Cube" component — a sine-carved, ray-marched SDF box lit by a mouse-driven key light and an Inigo-Quilez palette — framed as a lapidary analysis bench: a reticle-bracketed specimen window, a facet console of four faders that promote the component's props (complexity, dispersion, loupe gain, light parallax) to live uniforms, a four-specimen preset catalog, and a telemetry strip reading FPS, derived facet count, refractive index and carat; fonts vendored locally, with a graceful WebGL-offline fallback.

Shadcn-style integration of the verbatim Three.js "Cybernetic Grid" shader (a pulsing cobalt lattice with magenta energy crawling the intersections and a white glow that warps the grid around the cursor) dropped into `@/components/ui`, framed as a lattice-integrity diagnostic console — a probe caliper snaps to the warp center and reports its coordinates, an integrity gauge fills with render rate, and hold/re-seed controls drive the field clock; Chakra Petch type and fonts vendored locally.

Shadcn-style integration of the prompt's `digital-glitch` Three.js/GLSL component — a retro CRT shader of scanlines, RGB-shift chromatic aberration, and film grain rendered full-viewport — framed as the "Static Bureau" signal-calibration bench: the brief's five uniforms become engineering trim faders, its presets become patch channels, and a live SMPTE timecode, measured FPS, and a signal-loss meter read straight off the shader's own animation loop; fonts vendored locally.

Shadcn-style integration of the brief's `DigitalPetalsShader` — a polar-coordinate GLSL flower on a single full-screen quad with Three.js dropped into `@/components/ui`, framed as a herbarium specimen plate: the corolla breathes between three and seven petals, the cursor seeds a soft light bloom, and a signature **Petal Dial** gauge plus a cultivation-log HUD read the shader's exact per-frame petal count and state straight off the GPU; fonts vendored locally.

"DITHER LAB" darkroom instrument integrating the drop-in `DitheringShader` (WebGL2 / GLSL ES 3.00, 7 shapes × 4 ordered-Bayer/noise dithering matrices) at `@/components/ui` — a full-bleed live stage with reticle chrome, shape/matrix/ink/pixel-grid/speed controls plus presets driving the shader through live uniforms, and a telemetry HUD reading FPS/clock/buffer/cell-grid straight off the GPU; fonts vendored locally.

"DITHER LAB" showcase for the `designali-in/dithering-shader` component — a WebGL2 fragment shader that resolves seven procedural fields (sphere, ripple, swirl, warp, dots, wave, simplex) to 1-bit through ordered Bayer or stochastic dithering — dropped into `@/components/ui` and framed as a 1-bit print instrument: a full-bleed live hero with an FPS/frame telemetry HUD, a control deck promoting every prop (shape, dither type, pxSize, speed, colours) to a live knob, a signature panel that renders the shader's actual Bayer threshold matrix and live-dithers a tonal ramp, plus a lazy-mounted shape index; fonts vendored locally.

"HALFTONE ENGINE" — a halftone-press take on the prompt's `DitheringShader` (WebGL2, 7 shapes × 4 ordered-Bayer/noise matrices) at `@/components/ui`: a full-bleed swirl press with press controls (shape/matrix/phosphor/pixel-size/speed), a panel rendering the active Bayer threshold matrix cell-by-cell, and an ink-coverage telemetry HUD reading lit-pixel fraction straight off the framebuffer; fonts vendored locally.

Shadcn-style integration of the `ShaderCanvas` "Dynamic Waveform" — a Three.js fragment shader that stacks up to eight mouse-warpable sine harmonics into a glowing signal trace — dropped into `@/components/ui` and framed as a CRT "Signal Analysis Bench" with an oscilloscope graticule, corner reticles, two-trace colour trims, five faders wired straight to the shader uniforms, four channel presets (Baseline / Signal Scan / Deep Sea / Vaporwave), and a live telemetry strip (sweep time, refresh, trace level, harmonics) read off the shader's own per-frame state; fonts vendored locally.

Shadcn/Tailwind v4/TS integration of the prompt's `ElectricWavesShader` (a Three.js fragment shader piling additive R/G/B sine-interference lines onto one full-screen quad), framed as the "ARCWAVE" signal instrument — viewfinder brackets, CRT scanlines, the component's own five-slider uniform deck (wave count / amplitude / frequency / brightness / colour separation), and a live FPS / uptime / resolution telemetry HUD; system fonts, runs offline.

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.

Shadcn-style integration of the brief's verbatim Three.js "Celestial Sphere" `ShaderCanvas` (six-octave FBM cloud deck + Fresnel atmosphere rim on a rotating `SphereGeometry`) dropped into `@/components/ui`, framed as a "Stellar Cartography" exoplanet survey — the sphere sits inside a brass eyepiece with an engraved reticle and radar sweep, two nebula colour chips plus rotation / cloud-density / glow dials and the brief's three world presets, a catalog card deriving spectral class / rotation period / albedo from the live props, and a telemetry strip reading the shader's own per-frame clock, FPS and longitude; fonts vendored locally.

Shadcn/Tailwind/TypeScript integration of the prompt's `InteractiveWaveShader` (a nine-iteration cosine-displacement Three.js fragment-shader wave field on one full-screen quad), framed as a "tidal field observatory" — a live buoy-telemetry panel reads significant wave height/period/turbulence straight off the GPU via `gl.readPixels`, with a sea-state mode selector, center-clarity toggle, and amplitude dial steering the shader's `mode`/`dimmingDisabled`/`intensity` uniforms; fonts vendored locally.

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.

Shadcn-style integration of the verbatim Three.js `ShaderAnimation` (a 7-colour neon-rainbow spiral GLSL fragment shader) dropped into `@/components/ui`, framed as a deep-field "survey transmission" — a registration-corner plate, a Galactic Spiral hero lockup over a legibility scrim, and a live telemetry ledger reporting mission clock, measured render FPS, and drifting R.A./Dec. coordinates; fonts vendored locally.

Shadcn-style integration of the brief's "Gaming vibe Shader" (`neno-shader.tsx`) — a Three.js neon ring field (electric blue → magenta) that warps, breathes and rotates — dropped into `@/components/ui` and framed as the "NENO RIG" arcade-rig boot diagnostic, with an Orbitron cabinet marquee lockup, an overclock control deck of four faders (clock/rings/warp/sync) plus RGB profiles wired straight into the shader uniforms, pointer parallax with a targeting reticle, and a live telemetry HUD; fonts vendored locally.

Shadcn/Tailwind/TypeScript integration of the brief's verbatim `GLSLHills` — a monochrome 3-octave Perlin hill range on one 256² `RawShaderMaterial` plane, folded to face the camera and pushed forever forward so its far ridges dissolve into haze — dropped into `@/components/ui` and framed as the "FOGBANK" low-visibility terrain monitor: the canonical demo lockup floats over a viewfinder stage (reticle, scanlines, sweep), a drift console of four faders promotes the props + baked fog/haze constants to live uniforms with four field presets, and the signature visibility gauge plus a telemetry strip read drift clock / FPS / cam depth / visibility (km) and ridge-crest straight off the GPU framebuffer; hold/resume drives the shader clock, fonts vendored locally.

"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.

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.

Shadcn-style integration of the brief's verbatim `shield-shader.tsx` — a 100-step `three` + `@react-three/fiber` fragment shader that folds a mirrored hex lattice onto a sphere distortion and `tanh`-tonemaps a cyan→violet arc field — dropped into `@/components/ui` and framed as the "AEGIS" deflector-array console: a typed sibling promotes every baked GLSL constant (dome bias, curvature, hex scale, drift, edge/arc gain, falloff, tint) to a live uniform driven by a calibration deck, five named deflector profiles snap the field to regimes, a cursor-tracked impact reticle lights the dome, and a circular shield-integrity gauge plus a telemetry strip read render rate / impact charge / shield clock straight off the GPU loop with a freeze control; fonts vendored locally.