Components
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.
npx @21st-dev/cli add dhileepkumargm/volumetric-glitchLoading preview...
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;