Components
Loading preview...
A responsive, animated hero background built with Three.js using InstancedMesh and post-processing effects (Unreal Bloom + RGB Shift). Ideal for landing pages, hero sections, and visual effects.
@blacksmith301
npx shadcn@latest add https://21st.dev/r/blacksmith301/ai-hero-background'use client';
import { AiHeroBackground } from '../components/ui/ai-hero-background';
export default function Demo() {
return (
<div style={{ position: 'relative', width: '100%', height: '100vh', overflow: 'hidden' }}>
<AiHeroBackground />
<div
style={{
position: 'absolute',
inset: 0,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1,
color: 'white',
fontSize: '3rem',
fontWeight: 800,
textAlign: 'center',
pointerEvents: 'none',
}}
>
Ai Hero Background
</div>
</div>
);
}