Shader Sci-Fi Worlds
A shader-driven sci-fi landing page where four distinct universes cross-fade as you scroll. Copy the prompt to build your own.
Loading preview...
2507 views
Start with this prompt
Generate a shader landing page with four universes
Build a shader-driven sci-fi landing page framed as a live study in real-time raymarching: the page ships no textures, no meshes, no assets — four cosmic scenes are computed entirely by fragment-shader math and cross-fade continuously as the visitor scrolls. Scene one, Singularity: a black hole with an accretion disk, light integrated along geodesics for about 200 steps so the disk's far side folds over the top, with relativistic Doppler beaming brightening one side. Scene two, Nebula: a 4-octave fBm density field lit by roughly 44 front-to-back single-scattering samples. Scene three, Tides: an ocean heightfield of eight interfering wave octaves found by bisection, fresnel-reflecting a 32-shell aurora sky. Scene four, First Light: ridged multifractal terrain sphere-traced to the horizon at dawn. Each chapter pairs one poetic headline with a short list of technical parameters (sample counts, integration steps). A left rail tracks chapters with a progress fill; a corner HUD shows the current scene, render buffer, frame rate and scroll depth; a top bar reads WebGPU · real-time. Monospace type, a black-and-white palette with a single orange accent, and a film-grain overlay. The scroll-driven transitions must run genuinely and smoothly in any WebGPU-capable browser. Replace the four universes with a forest across spring, summer, autumn, and winter, keeping the scroll-driven cross-fade structure. Give each season its own palette and particles (petals, fireflies, falling leaves, snow) and rewrite the copy around a nature theme.
Build a shader-driven sci-fi landing page framed as a live study in real-time raymarching: the page ships no textures, no meshes, no assets — four cosmic scenes are computed entirely by fragment-shader math and cross-fade continuously as the visitor scrolls. Scene one, Singularity: a black hole with an accretion disk, light integrated along geodesics for about 200 steps so the disk's far side folds over the top, with relativistic Doppler beaming brightening one side. Scene two, Nebula: a 4-octave fBm density field lit by roughly 44 front-to-back single-scattering samples. Scene three, Tides: an ocean heightfield of eight interfering wave octaves found by bisection, fresnel-reflecting a 32-shell aurora sky. Scene four, First Light: ridged multifractal terrain sphere-traced to the horizon at dawn. Each chapter pairs one poetic headline with a short list of technical parameters (sample counts, integration steps). A left rail tracks chapters with a progress fill; a corner HUD shows the current scene, render buffer, frame rate and scroll depth; a top bar reads WebGPU · real-time. Monospace type, a black-and-white palette with a single orange accent, and a film-grain overlay. The scroll-driven transitions must run genuinely and smoothly in any WebGPU-capable browser. Insert a product section between the second and third scenes: three side-by-side product cards with a title, one selling point, and a button each, fading in sequentially on scroll, styled to match the shader visuals.
Build a shader-driven sci-fi landing page framed as a live study in real-time raymarching: the page ships no textures, no meshes, no assets — four cosmic scenes are computed entirely by fragment-shader math and cross-fade continuously as the visitor scrolls. Scene one, Singularity: a black hole with an accretion disk, light integrated along geodesics for about 200 steps so the disk's far side folds over the top, with relativistic Doppler beaming brightening one side. Scene two, Nebula: a 4-octave fBm density field lit by roughly 44 front-to-back single-scattering samples. Scene three, Tides: an ocean heightfield of eight interfering wave octaves found by bisection, fresnel-reflecting a 32-shell aurora sky. Scene four, First Light: ridged multifractal terrain sphere-traced to the horizon at dawn. Each chapter pairs one poetic headline with a short list of technical parameters (sample counts, integration steps). A left rail tracks chapters with a progress fill; a corner HUD shows the current scene, render buffer, frame rate and scroll depth; a top bar reads WebGPU · real-time. Monospace type, a black-and-white palette with a single orange accent, and a film-grain overlay. The scroll-driven transitions must run genuinely and smoothly in any WebGPU-capable browser. Add mobile performance adaptation: below 768px width, reduce particle counts and render resolution, disable the most expensive volumetric lighting, and show a "high performance mode" toggle visitors can switch themselves.
