Volumetric Glitch

Heroes 12

About

A remixable, theme-aware hero background with subtle SVG-based glitch distortion, panning grid, volumetric glow flares, and prominent foreground CTAs. Visuals are fully tunable via the exported CONFIG or by passing a runtime config prop. Designed for easy remixing and integration on landing pages and homepages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Volumetric Glitch to your project and fits it to your theme.

Code

How Volumetric Glitch is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import VolumetricGlitchHero, { CONFIG as HERO_CONFIG } from '@/components/ui/volumetric-glitch';

function App() {
  // Example of overriding CONFIG at runtime
  const customConfig = {
    ...HERO_CONFIG,
    primaryGlow: '80, 160, 255',
    secondaryGlow: '255, 95, 160',
    gridColor: '180, 180, 180',
    glitchSpeed: '6s',
    glitchIntensity: 0.04,
    gridDensity: 18,
  };

  const onPrimary = () => {
    // placeholder CTA handler
    console.log('Primary CTA clicked');
  };

  const onSecondary = () => {
    console.log('Secondary CTA clicked');
  };

  return (
    <div id="root-wrapper">
      <VolumetricGlitchHero
        title="Volumetric Glitch"
        subtitle="Designing at the intersection of 3D fidelity and dynamic user experience. This is excellence, redefined."
        primaryCTA={{ label: 'Initiate Launch', onClick: onPrimary }}
        secondaryCTA={{ label: 'View Dimensional Map', onClick: onSecondary }}
        config={customConfig}
      />
    </div>
  );
}

export default App;