# VFX UI

> Shader-native visual effect components for React, rendered via WebGPU (vgpu).
> Expressive hero and footer sections, GPU backgrounds, and focused DOM interactions for your own content.

## Install

```bash
npx shadcn@latest add https://vfx-ui.com/r/hero-contour.json
```

Install editable source from the registry and use local component imports. The npm 0.1.0 release does not match this catalog; do not use it for these examples.

## Component catalog

- [Hero Eclipse](https://vfx-ui.com/components/hero-eclipse.md): An astronomical instrument in warm copper. Move the pointer to shift the eclipse and rotate its engraved dial.
- [Hero Contour](https://vfx-ui.com/components/hero-contour.md): A sunlit topographic print. Seed your own landscape and let the paper ridges rise around your pointer.
- [Footer Vinyl](https://vfx-ui.com/components/footer-vinyl.md): A closing track for your website. A grooved record turns with your pointer, framed by a bold pink sleeve.
- [Astra Field](https://vfx-ui.com/components/astra-field.md): A spiral written in starlight. Cool stellar dust, warm distant suns and a luminous core, suspended in a deep blue field.
- [Radiant Dots](https://vfx-ui.com/components/radiant-dots.md): A constellation of light. Each dot emits and occludes, sending soft illumination through a real radiance-cascade field.
- [Footer Tidal](https://vfx-ui.com/components/footer-tidal.md): Copper tidal lines beneath monumental lettering. Move across the footer and reshape the current.
- [Footer Fold](https://vfx-ui.com/components/footer-fold.md): Your wordmark becomes a hinged paper screen. Each panel turns toward the passing pointer.
- [Footer Phosphor](https://vfx-ui.com/components/footer-phosphor.md): A wordmark made of light. Its cells scatter around your pointer and settle back into place.
- [Spectral Card](https://vfx-ui.com/components/spectral-card.md): A touch of iridescence. Real content, spatial tilt, and light that follows you.
- [Kinetic Text](https://vfx-ui.com/components/kinetic-text.md): Letters lift into a soft wave as your cursor passes through.
- [Magnetic](https://vfx-ui.com/components/magnetic.md): Give a button, link, or any small piece of content a gentle pull.
- [Wave Background](https://vfx-ui.com/components/wave-background.md): Three layered sine bands sweeping over a tri-color gradient, rendered fully on the GPU via WebGPU.
- [Fluid Gradient](https://vfx-ui.com/components/fluid-gradient.md): Domain-warped fBm noise flowing through a curated palette — organic liquid color, zero video.
- [Aurora](https://vfx-ui.com/components/aurora.md): Polar-light curtains: fBm-perturbed Gaussian bands drifting across a near-black GPU sky.
- [Starfield](https://vfx-ui.com/components/starfield.md): Hashed star grid with twinkle and slow parallax drift — deep-space depth from one fullscreen pass.
- [Particle Field](https://vfx-ui.com/components/particle-field.md): Procedural cell-hashed particles with drift and size breathing — a living texture, no sprite sheet.
- [Glass Card](https://vfx-ui.com/components/glass-card.md): Thick-cut glass over a printed studio scene. Beveled edges split light while the solid tilts toward your pointer.
- [Liquid Glass](https://vfx-ui.com/components/liquid-glass.md): A molten glass loop. Travelling waves reshape its silhouette and the image transmitted through it.
- [Glass Lens](https://vfx-ui.com/components/glass-lens.md): A biconvex lens: magnification through the center, inversion at the edges, and fine spectral fringes.
- [Black Hole](https://vfx-ui.com/components/black-hole.md): The vgpu optimized-black-hole example as a drop-in component: a baked null-geodesic G-buffer, 4×4 photon-ring AA, animated disk shading, and HDR bloom — a verbatim port of the official pipeline (MIT, Vercel).
- [Mesh Gradient](https://vfx-ui.com/components/mesh-gradient.md): Voronoi-cell color fields flowing through a curated palette — the classic mesh-gradient look, live on the GPU.
- [Iridescent](https://vfx-ui.com/components/iridescent.md): Thin-film interference colors drifting as silk — cosine-palette holography in a single pass.
- [Vortex](https://vfx-ui.com/components/vortex.md): Spiral galaxy with logarithmic arms, hashed starlight and a breathing core.
- [Ribbon Field](https://vfx-ui.com/components/ribbon-field.md): Three Gaussian light ribbons drifting over a dot-matrix grid with bloom cores and film grain — WGSL port of ThreeUI's RibbonField (MIT).
- [Fiber Flow](https://vfx-ui.com/components/fiber-flow.md): Luminous silk fibers streaming through the dark — a domain-warped fbm ridge field with strands that ebb and flow, pointer parallax and a soft cursor glow. Original vfx-ui design.
- [Light Prism](https://vfx-ui.com/components/light-prism.md): A solid optical prism with internal reflections, spectral caustics and a textured light field. Powered by Vercel’s complete MIT prism pipeline.
- [Hero Fluid](https://vfx-ui.com/components/hero-fluid.md): Drop-in hero: centered headline over a GPU liquid-gradient field with real selectable text and scrim-backed contrast.
- [Hero Aurora](https://vfx-ui.com/components/hero-aurora.md): Drop-in hero: bottom-left copy anchored under full-bleed aurora curtains rendered per-pixel on the GPU.
- [Hero Fiber](https://vfx-ui.com/components/hero-fiber.md): Drop-in hero: top-weighted headline over luminous silk fibers streaming through the dark.
- [Hero Globe](https://vfx-ui.com/components/hero-globe.md): Drop-in split hero: copy on the left, the dot-matrix cobe planet (the globe behind vercel.com) glowing on the right.
- [Hero Mesh](https://vfx-ui.com/components/hero-mesh.md): Drop-in hero: centered headline over a slow Voronoi mesh-gradient field — every frame a different poster.
- [Hero Iridescent](https://vfx-ui.com/components/hero-iridescent.md): Drop-in hero: left copy over a holographic thin-film sheen — the premium product-launch look.
- [Hero Vortex](https://vfx-ui.com/components/hero-vortex.md): Drop-in hero: centered headline at the eye of a spiral galaxy with star speckles and trailing arms.
- [Hero Ribbon](https://vfx-ui.com/components/hero-ribbon.md): Drop-in split hero: copy left, three Gaussian light ribbons sweeping the right over a dot-matrix grid.
- [Hero Particles](https://vfx-ui.com/components/hero-particles.md): Drop-in hero: top-weighted headline with a badge row over a drifting GPU particle field.
- [Hero Starfield](https://vfx-ui.com/components/hero-starfield.md): Drop-in hero: bottom-left copy under a twinkling hashed star grid with parallax drift.
- [Hero Black Hole](https://vfx-ui.com/components/hero-black-hole.md): Drop-in hero: left copy beside a ray-traced accretion disk with relativistic beaming and a lensed star field.
- [Chroma Flow](https://vfx-ui.com/components/chroma-flow.md): Four-edge liquid color field on a midnight base — the palette sloshes from the edges in whichever direction the cursor sweeps. Original vfx-ui design.
- [Hero Chroma](https://vfx-ui.com/components/hero-chroma.md): Drop-in hero section: bottom-left copy over a four-edge liquid color field that floods toward the cursor's sweep direction.
- [Block Nav](https://vfx-ui.com/components/block-nav.md): Complete navigation bar: brand, desktop links, actions, and an accessible mobile sheet. Sticky variant gains a scrim once the page scrolls.
- [Block Showcase](https://vfx-ui.com/components/block-showcase.md): Product showcase stage: browser-chrome frame with a replaceable screenshot or video (built-in CSS demo screen by default), headline and actions, with a gentle pointer tilt.
- [Block Feature Grid](https://vfx-ui.com/components/block-feature-grid.md): Feature grid with real hierarchy: one bento feature card with media plus supporting cells. Icons, media, links and copy all replaceable.
- [Block Feature Tabs](https://vfx-ui.com/components/block-feature-tabs.md): Feature tabs where the list, copy and illustration switch together. WAI-ARIA tabs pattern with arrow keys; a scrollable strip above the stage on touch layouts.
- [Block Scroll Story](https://vfx-ui.com/components/block-scroll-story.md): Scroll narrative: a sticky scene crossfades as story steps cross the viewport center; on small screens the scene docks above the steps so the story reads end to end.
- [Block Process Steps](https://vfx-ui.com/components/block-process-steps.md): Three-to-four step process with numbered badges and a connector line that draws itself in on scroll; vertical timeline on narrow screens, replaceable media per step.
- [Block Integrations](https://vfx-ui.com/components/block-integrations.md): Integrations hub: your product at the center of two connection rings of rebrandable tool tiles, with an always-available link grid below and on touch layouts.
- [Block Comparison](https://vfx-ui.com/components/block-comparison.md): Before/after comparison with a draggable reveal handle — keyboard (arrow keys, Home/End), touch and screen readers all work because the handle is a real range input.
- [Block Testimonials](https://vfx-ui.com/components/block-testimonials.md): Testimonials with a featured quote plus a field-note grid. The built-in quotes are fictional and visibly marked — swap in real customers via props and clear the marker.
- [Block Pricing](https://vfx-ui.com/components/block-pricing.md): Pricing plans with a working monthly/annual switch: amounts, billing basis and the savings pill all render from data, so the toggle can never lie. No payment backend.
- [Block FAQ](https://vfx-ui.com/components/block-faq.md): FAQ accordion with real disclosure semantics: buttons + aria-expanded/controls, arrow-key traversal, CSS grid-rows height animation, long answers with links and lists welcome.
- [Block CTA](https://vfx-ui.com/components/block-cta.md): Closing call to action: headline, supporting copy, primary and secondary actions and a replaceable brand visual layer — a concentric line artwork by default, any background component or media if you pass one.
- [Example — Product Launch](https://vfx-ui.com/components/example-launch.md): Complete fictional software launch page (“Orbit” by Lumen Labs): hero, showcase, feature grid, tabs, scroll story, integrations, pricing, testimonials, FAQ, CTA and footer. All copy is demo content.
- [Example — Design Studio](https://vfx-ui.com/components/example-studio.md): Complete fictional design-studio page (Atelier North): daylight editorial hero, engagement steps, portfolio showcase, before/after slider, services grid, fixed-fee engagements, testimonials, FAQ and a typographic footer.
- [Ember Drift](https://vfx-ui.com/components/ember-drift.md): Sparks rising from a bed of coals, cooling from gold to red through shimmering heat — two cell-hashed ember layers under an fbm thermal warp.
- [Caustics Field](https://vfx-ui.com/components/caustics-field.md): Sunlit pool-floor caustics dancing over deep water — a jittered-grid Voronoi net of focused light in three stacked octaves, with drifting silt motes.
- [Halo Rings](https://vfx-ui.com/components/halo-rings.md): Concentric light rings breathing outward from a luminous core, each sampled at three radii so the band edges split into spectral fringes like light through a prism.
- [Terrain Ridge](https://vfx-ui.com/components/terrain-ridge.md): Layered ridged-fbm mountain silhouettes in parallax drift — ridgelines recede into haze, each scrolling at its own speed, under a low sun that rims the nearest crest.
- [Silk Veil](https://vfx-ui.com/components/silk-veil.md): A draped silk curtain with a sheen band sweeping across it — domain-warped folds shaded anisotropically like cloth-of-gold, with fine weave grain.
- [Plasma Sheet](https://vfx-ui.com/components/plasma-sheet.md): Molten color currents folding through each other — two chained domain warps advect and fold the field so colors stir like dense dye, with filament highlights on the fold edges.
- [Star Tide](https://vfx-ui.com/components/star-tide.md): A field of stars drifting on slow luminous waves — two hashed star grids ride a shared interference field so the whole sky visibly sloshes like a tide.
- [Ink Bloom](https://vfx-ui.com/components/ink-bloom.md): Ink drops blooming and feathering across wet paper — each front is an fbm-perturbed radius, denser at the core and ring-deposited at the edge, paling as it ages. Light paper base.
- [Solar Corona](https://vfx-ui.com/components/solar-corona.md): A blazing sun disk crowned with streaming corona light — a limb-darkened photosphere with boiling granulation, red-shifted rim, fbm streamers and long polar plumes over a star field.
- [Dust Motes](https://vfx-ui.com/components/dust-motes.md): Dust motes drifting through slanted Tyndall light beams — parallel volumetric shafts whose width and brightness breathe with fbm, over a shadowed room.
- [Hero Aurora Editorial](https://vfx-ui.com/components/hero-aurora-editorial.md): Drop-in hero: a centered serif masthead — display title, two standfirst lines, dual CTAs — under full-bleed aurora curtains, with a radial scrim holding WCAG AA contrast.
- [Hero Starfield Split](https://vfx-ui.com/components/hero-starfield-split.md): Drop-in split hero: copy left, a badge wall in frosted chips right, so the twinkling star grid reads as the trust-panel backdrop.
- [Hero Vortex Centered](https://vfx-ui.com/components/hero-vortex-centered.md): Drop-in hero: the eye-of-the-storm cut — a tighter, slower spiral whose bright core lands exactly behind a short centered headline.
- [Hero Mesh Bold](https://vfx-ui.com/components/hero-mesh-bold.md): Drop-in hero: the poster cut — one oversized ultra-bold headline shouting over a vivid Voronoi mesh field. Keep the title short; the type is drawn to fill the frame.
- [Hero Fiber Top](https://vfx-ui.com/components/hero-fiber-top.md): Drop-in hero: a left-set masthead pressed against the top edge while the silk-fiber field streams beneath it — fibers carry the lower two-thirds, the scrim carries the type.
- [Hero Chroma Full](https://vfx-ui.com/components/hero-chroma-full.md): Drop-in hero: the full-bleed cut — the four-edge chroma field runs wall to wall with copy anchored bottom-left over the side scrim, a dusk palette by default.
- [Hero Black Hole Cinema](https://vfx-ui.com/components/hero-black-hole-cinema.md): Drop-in hero: the cinema cut — hard letterbox bars top and bottom, the accretion disk framed like a feature film, and your title card centered in the quiet band.
- [Hero Particles Badge](https://vfx-ui.com/components/hero-particles-badge.md): Drop-in hero: the badge-first cut — trust chips lead the stack at the very top on their own frosted backing, then a centered headline over the drifting particle field.
- [Hero Ribbon Left](https://vfx-ui.com/components/hero-ribbon-left.md): Drop-in hero: the mirrored cut — copy left with a vertical eyebrow rail along its edge, three Gaussian light ribbons sweeping the right over a dot-matrix grid.
- [Hero Fluid Minimal](https://vfx-ui.com/components/hero-fluid-minimal.md): Drop-in hero: the minimal cut — one line of copy, one CTA, one liquid gradient. The entire hero for products that can be named in a breath.
- [Glass Panel](https://vfx-ui.com/components/glass-panel.md): An original ray-marched optical slab built to carry content: beveled edges split light while the solid tilts toward your pointer, and real DOM content rides above it.
- [Glass Tile](https://vfx-ui.com/components/glass-tile.md): A wall of glass bricks on the shared optical pipeline: one biconvex lens lives in a layer that travels to the hovered brick and bulges through it — a single renderer, however many bricks.
- [Chromatic Text](https://vfx-ui.com/components/chromatic-text.md): The pointer is the prism: letters near the cursor split into red and blue fringes while the rainbow underneath slides with it.
- [Ripple Text](https://vfx-ui.com/components/ripple-text.md): Type you can touch: a click (or tap) drops a ripple that travels outward through the letters, and a resting pointer leaves a soft dimple.
- [Spectrum Text](https://vfx-ui.com/components/spectrum-text.md): A ribbon of daylight sliding through the words: one spectral gradient flows continuously across the type and leans toward the pointer.
- [Tilt Card](https://vfx-ui.com/components/tilt-card.md): A porcelain card on a gimbal: the surface tilts in space while a specular highlight tracks the pointer across it.
- [Pointer Glow](https://vfx-ui.com/components/pointer-glow.md): A handheld light for layouts: the region dims slightly and a warm source follows the pointer, brightening whatever it rests on.
- [Spotlight Card](https://vfx-ui.com/components/spotlight-card.md): A card played under a torch: a soft pool of light rests at the center, then follows the pointer to uncover what is written there.
- [Elastic Hover](https://vfx-ui.com/components/elastic-hover.md): Rubber around whatever you wrap: hovering swells it, pressing squashes it wide, and an under-damped spring snaps it back with a wobble.
- [Magnetic Grid](https://vfx-ui.com/components/magnetic-grid.md): A lattice of iron filings for the cursor: each dot feels the pointer's field, slides and swells as it passes, and settles back when it leaves.
- [Block Logos](https://vfx-ui.com/components/block-logos.md): Customer logo wall: a hairline grid of brand tiles that sit desaturated until hover. Real marks via logo (img or inline svg) or styled wordmarks — no assets required.
- [Block Stats](https://vfx-ui.com/components/block-stats.md): Stats band where every number counts up from zero on scroll-in, with a settled, screen-reader-friendly final value always present. Prefixes, suffixes and formatting are props.
- [Block Team](https://vfx-ui.com/components/block-team.md): Team grid: cards with an avatar (your image node or an auto-generated initials badge), name, role and profile links. Names can link out.
- [Block Gallery](https://vfx-ui.com/components/block-gallery.md): Work gallery: a responsive grid of tiles that lift on hover, with an optional lightbox — a real dialog (focus moves in, Escape closes, arrows navigate, Tab stays trapped, focus returns).
- [Block Timeline](https://vfx-ui.com/components/block-timeline.md): Company or product timeline: a vertical rail that draws itself in on scroll, alternating left/right on wide screens and collapsing to one rail on small ones.
- [Block Newsletter](https://vfx-ui.com/components/block-newsletter.md): Newsletter signup that is a working form, not a mockup: client-side validation with inline announced errors, and a confirmation panel on success. Wire onSubscribe; without it, demo mode says so on screen.
- [Block Contact](https://vfx-ui.com/components/block-contact.md): Contact section: a direct-channels list (email, phone, office — real links) beside a configurable form skeleton with labels wired to inputs and native validation intact.
- [Block Banner](https://vfx-ui.com/components/block-banner.md): Announcement banner: a slim accent-tinted strip for one important message with an optional action. Dismissible for real — labeled button, Escape works, onDismiss persists the choice.
- [Block Milestones](https://vfx-ui.com/components/block-milestones.md): Milestone progress: a roadmap strip whose completed steps light up in sequence on scroll-in, the current step breathes, and upcoming steps stay dimmed. Which steps are done is pure data.
- [Block Quote Wall](https://vfx-ui.com/components/block-quote-wall.md): Quote wall: many quotes as a masonry wall, or one at a time in a keyboard-friendly rotator (real prev/next controls, focus and hover pause, reduced motion disables auto-advance).

## Per-component docs (machine-readable)

- https://vfx-ui.com/components/astra-field.md
- https://vfx-ui.com/components/aurora.md
- https://vfx-ui.com/components/black-hole.md
- https://vfx-ui.com/components/block-banner.md
- https://vfx-ui.com/components/block-comparison.md
- https://vfx-ui.com/components/block-contact.md
- https://vfx-ui.com/components/block-cta.md
- https://vfx-ui.com/components/block-faq.md
- https://vfx-ui.com/components/block-feature-grid.md
- https://vfx-ui.com/components/block-feature-tabs.md
- https://vfx-ui.com/components/block-gallery.md
- https://vfx-ui.com/components/block-integrations.md
- https://vfx-ui.com/components/block-logos.md
- https://vfx-ui.com/components/block-milestones.md
- https://vfx-ui.com/components/block-nav.md
- https://vfx-ui.com/components/block-newsletter.md
- https://vfx-ui.com/components/block-pricing.md
- https://vfx-ui.com/components/block-process-steps.md
- https://vfx-ui.com/components/block-quote-wall.md
- https://vfx-ui.com/components/block-scroll-story.md
- https://vfx-ui.com/components/block-showcase.md
- https://vfx-ui.com/components/block-stats.md
- https://vfx-ui.com/components/block-team.md
- https://vfx-ui.com/components/block-testimonials.md
- https://vfx-ui.com/components/block-timeline.md
- https://vfx-ui.com/components/caustics-field.md
- https://vfx-ui.com/components/chroma-flow.md
- https://vfx-ui.com/components/chromatic-text.md
- https://vfx-ui.com/components/dust-motes.md
- https://vfx-ui.com/components/elastic-hover.md
- https://vfx-ui.com/components/ember-drift.md
- https://vfx-ui.com/components/example-launch.md
- https://vfx-ui.com/components/example-studio.md
- https://vfx-ui.com/components/fiber-flow.md
- https://vfx-ui.com/components/fluid-gradient.md
- https://vfx-ui.com/components/footer-fold.md
- https://vfx-ui.com/components/footer-phosphor.md
- https://vfx-ui.com/components/footer-tidal.md
- https://vfx-ui.com/components/footer-vinyl.md
- https://vfx-ui.com/components/glass-card.md
- https://vfx-ui.com/components/glass-lens.md
- https://vfx-ui.com/components/glass-panel.md
- https://vfx-ui.com/components/glass-tile.md
- https://vfx-ui.com/components/halo-rings.md
- https://vfx-ui.com/components/hero-aurora-editorial.md
- https://vfx-ui.com/components/hero-aurora.md
- https://vfx-ui.com/components/hero-black-hole-cinema.md
- https://vfx-ui.com/components/hero-black-hole.md
- https://vfx-ui.com/components/hero-chroma-full.md
- https://vfx-ui.com/components/hero-chroma.md
- https://vfx-ui.com/components/hero-contour.md
- https://vfx-ui.com/components/hero-eclipse.md
- https://vfx-ui.com/components/hero-fiber-top.md
- https://vfx-ui.com/components/hero-fiber.md
- https://vfx-ui.com/components/hero-fluid-minimal.md
- https://vfx-ui.com/components/hero-fluid.md
- https://vfx-ui.com/components/hero-globe.md
- https://vfx-ui.com/components/hero-iridescent.md
- https://vfx-ui.com/components/hero-mesh-bold.md
- https://vfx-ui.com/components/hero-mesh.md
- https://vfx-ui.com/components/hero-particles-badge.md
- https://vfx-ui.com/components/hero-particles.md
- https://vfx-ui.com/components/hero-ribbon-left.md
- https://vfx-ui.com/components/hero-ribbon.md
- https://vfx-ui.com/components/hero-starfield-split.md
- https://vfx-ui.com/components/hero-starfield.md
- https://vfx-ui.com/components/hero-vortex-centered.md
- https://vfx-ui.com/components/hero-vortex.md
- https://vfx-ui.com/components/ink-bloom.md
- https://vfx-ui.com/components/iridescent.md
- https://vfx-ui.com/components/kinetic-text.md
- https://vfx-ui.com/components/light-prism.md
- https://vfx-ui.com/components/liquid-glass.md
- https://vfx-ui.com/components/magnetic-grid.md
- https://vfx-ui.com/components/magnetic.md
- https://vfx-ui.com/components/mesh-gradient.md
- https://vfx-ui.com/components/particle-field.md
- https://vfx-ui.com/components/plasma-sheet.md
- https://vfx-ui.com/components/pointer-glow.md
- https://vfx-ui.com/components/radiant-dots.md
- https://vfx-ui.com/components/ribbon-field.md
- https://vfx-ui.com/components/ripple-text.md
- https://vfx-ui.com/components/silk-veil.md
- https://vfx-ui.com/components/solar-corona.md
- https://vfx-ui.com/components/spectral-card.md
- https://vfx-ui.com/components/spectrum-text.md
- https://vfx-ui.com/components/spotlight-card.md
- https://vfx-ui.com/components/star-tide.md
- https://vfx-ui.com/components/starfield.md
- https://vfx-ui.com/components/terrain-ridge.md
- https://vfx-ui.com/components/tilt-card.md
- https://vfx-ui.com/components/vortex.md
- https://vfx-ui.com/components/wave-background.md

## Scope guard

This library provides customizable hero and footer sections, GPU visuals, focused interactions, and complete page Blocks for marketing sites.
Hero sample copy is replaceable. Pass title/subtitle or children and configure CTA href/onClick.
Footer sample copy is replaceable. Configure brand, title, CTA, groups, legal links and copyright. Supply children for your own introduction/navigation layout.
Blocks (block-*) are full page sections: all copy, links, colors and items arrive through props. They are pure DOM/CSS — no WebGPU required — and compose into complete pages; see example-launch and example-studio.
Example pages ship fictional demo content (marked on screen): replace it before going live.
DOM interaction components and blocks do not require WebGPU. This is not a general-purpose UI kit.