HALCYON is a fictional ambient-computing brand, designed and built entirely in code — no stock photos, no image generation, no design tools. One HTML file. Here is exactly how, so you can do the same.
The entire sky is a full-screen raw WebGL fragment shader (no Three.js, no libraries). Three octave-stacked layers of fbm (fractal Brownian motion) noise are combined: one warps the vertical coordinate to create ribbon bands, one drives a violet haze, and one modulates a rose highlight. A vignette and a hashed-pixel starfield finish the frame. The pointer position is fed in as a uniform with heavy easing (lerp 0.03), so the whole sky leans almost imperceptibly toward your cursor.
A single 60-line GLSL function replaces what would otherwise be hundreds of megabytes of looping video. It runs at 60fps, weighs ~2KB, never pixelates, and responds to input — something footage can never do.
Two Google fonts play against each other: Space Grotesk at weight 300 for a cool, technical body voice, and Instrument Serif italic for the emotional words — dissolves, calm, quiet. The italics carry a gradient via background-clip:text, tying the type to the shader palette (teal → violet → rose).
--mx/--my) feeding a radial-gradient overlay.feTurbulence data-URI, animated in 10 steps, at 5% opacity. It kills the “flat gradient” feel.cubic-bezier(.22,1,.36,1) — the site feels like one material.prefers-reduced-motion collapses all animation for accessibility.View source on this page's parent — everything is in one file. Start with the shader (copy the fbm pattern), set your three accent colors as GLSL vec3s and CSS variables from the same hex values, then build the page above it with a fixed transparent-on-dark layout.