CrazyGLVaporwave Dashboard Sunset
Your product screenshot floats over a magenta perspective grid floor, with a slatted retro sun glowing on the horizon and a wet-neon reflection underneath. 80s/90s vaporwave SaaS hero.
Usage
import VaporwaveSunset from '@crazygl/hero-vaporwave-sunset';
export default function Page() {
return (
<VaporwaveSunset
heading="Ship in the future."
subheading="Retro-future analytics for modern teams."
screenshot="https://yoursite.com/dashboard.png"
sunColor1="#ffd76a"
sunColor2="#ff2e97"
gridColor="#ff45d0"
/>
);
}Customise
- Content —
contentType,heading,subheading,column1,column2,content,screenshot. - Screenshot transform —
screenshotX/Y/Z,screenshotScale,screenshotTilt,screenshotRotationY. - Grid floor —
gridColor,gridBaseColor,gridDensity,gridSpeed. - Retro sun —
sunColor1,sunColor2,sunSize,sunStripeFreq(venetian slats),sunX,sunY,sunIntensity. - Sky & feel —
skyTop,skyMiddle,parallaxStrength,transparentBackground,headingFontFamily.
Best for
- Retro-future / synthwave SaaS and dev-tool launches.
- Product screenshot showcases that want personality.
- Music, gaming, and creative-tool landing pages.
One command, zero config.
npm install @crazygl/hero-vaporwave-sunsetImport once, drop it in.
The component takes the same props you see in the live customizer on the right — every default ships poster-quality.
import VaporwaveDashboardSunset from '@crazygl/hero-vaporwave-sunset';
export default function Landing() {
return (
<VaporwaveDashboardSunset />
);
}SSR-safe by default.
The wrapper renders static HTML on the server and only initialises the canvas after hydration, so search engines see your copy.
// app/page.tsx — works in SSR-first frameworks (Next, Remix, Astro, etc.)
'use client';
import VaporwaveDashboardSunset from '@crazygl/hero-vaporwave-sunset';
export default function Page() {
return (
<section>
<VaporwaveDashboardSunset
heading="Say hi."
subheading="Your new hero."
/>
<article>
<h2>Welcome</h2>
<p>Your content keeps its own voice below the hero.</p>
</article>
</section>
);
}
