Structure First
Semantic HTML is the skeleton. Headings in order, landmarks named, one H1 per page. The exotic stuff sits on top of bones, never instead of them.
Junior Diaz · Clausi.web · Est. 2026
I code
exotic
websites
from scratch.
Clausi.web is my working notebook on building unforgettable sites — shaders, 3D scenes, scroll physics, sound-reactive visuals — all engineered to stay fast, accessible and findable.
shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·shaders · three.js · scroll physics · particles · semantic html · 60fps or delete ·
01 — The Method
Four rules I don't break
Type As Weapon
Two families, hard contrast, brutal scale. Legibility is a design decision, not a fallback — even when the page is on fire.
Speed Is Content
Lazy images, code-split scenes, zero framework stacking. A 60fps page nobody waits for beats a heavy one every time.
Search On Purpose
Real titles, real descriptions, canonical URLs, structured data. Write for a person, format for a crawler.
02 — The Arsenal
How I code the features that make a site feel alien
Every exotic effect on a Clausi.web build is hand-written, lazy-loaded and benchmarked. Here's exactly how each one gets implemented.
Custom shader backgrounds
I write fragment shaders by hand — flowing noise fields, liquid gradients, CRT scanlines — and run them on a fullscreen quad behind the content. Uniforms feed scroll position and mouse velocity into the shader, so the background breathes with the user. Fallback: a static frame for reduced-motion users and weak GPUs.
WebGL2 · GLSL ES 3.0 · raw canvas, no engine
Real-time 3D hero scenes
Product models, impossible geometry, orbiting typography. I lazy-load Three.js after first paint, mount the scene only when it scrolls into view, and cap the pixel ratio at 1.5 so phones don't melt. Everything baked: lights, shadows, compressed DRACO geometry.
Three.js · DRACO · IntersectionObserver
Butter scroll physics
Native scroll feels dead. I layer Lenis smooth-scroll with GSAP ScrollTrigger for pinned sections, horizontal journeys, parallax layers at different velocities, and reveals that scrub with your thumb. Every animation reads prefers-reduced-motion and degrades to instant.
GSAP ScrollTrigger · Lenis · matchMedia gates
Particle systems & cursor trails
Magnetic cursor auras, particle explosions on click, text that shatters into dust and reassembles. Plain Canvas 2D with object pooling — no allocations in the render loop, so it holds 60fps with thousands of particles.
Canvas 2D · object pooling · rAF loop
Seamless page morphing
The View Transitions API lets a clicked card grow into the next page, or a title slide from one route to the next like a native app. Progressive enhancement: browsers without support just navigate normally.
View Transitions API · CSS ::view-transition
Animated line-drawn illustration
Stroke-dashoffset draw-on effects, morphing paths, animated logos that sketch themselves in. I hand-tune path lengths and easings so the draw-in lands exactly as the section enters the viewport.
Inline SVG · stroke-dasharray · ScrollTrigger
Marquees, masks & 3D flips
Infinite marquees, clip-path reveals, perspective card flips, grain overlays — all pure CSS. If the browser can do it without JavaScript, JavaScript never hears about it. Less code, fewer bugs, instant paint.
clip-path · perspective · @keyframes
Sound-reactive visuals
The Web Audio API's analyser node turns any track into frequency data. I map bass to scale, mids to hue, highs to jitter — visuals that literally dance. Mic input optional, permission always asked.
Web Audio API · AnalyserNode · FFT bins
Text as an interface
Variable fonts that fatten on scroll, split-character reveals, scramble/decode headlines, type that follows a curve. Text is the cheapest 3D object on the web — I treat every headline like a scene.
Variable fonts · split text · font-variation-settings
03 — The Process
The five-S build
Step 1
Sketch
Paper before pixels. Decide the one thing the page must do — and the one wow moment it lives for.
Step 2
Skeleton
Ship the HTML with no CSS. If it reads, it works. Exotic features get mounted onto this skeleton later.
Step 3
Skin
Design tokens, not one-off colors. Every value has a name, so the whole site can re-theme in one file.
Step 4
Spectacle
Now the exotic layer: shaders, 3D, scroll physics. Each feature lazy-loads, each has a reduced-motion fallback.
Step 5
Sharpen
Audit weight, contrast, metadata, frame rate. Then cut 20% of it. What survives is the site.
04 — Discipline
Exotic doesn't mean reckless
Every effect has an off switch
prefers-reduced-motion, low-power mode, no WebGL — the site must still be excellent with all spectacle removed.
Nothing blocks first paint
Shaders and 3D load after the words are on screen. Content first, fireworks second.
60fps or it's deleted
I profile with the dev tools frame meter. If a feature dips frames on a mid-range phone, it gets optimized or cut.
Accessibility is not a theme
Focus states, contrast ratios, keyboard paths through every interaction. Exotic for everyone, not just mouse users.
Search is just legibility for machines
Every page here declares a unique title under 60 characters and a description under 160. Not for a score — so a stranger knows what they're clicking.
Images carry real alt text, headings nest in order, and the layout is one column of meaning before it is ever a grid of boxes.
Structured data tells a crawler who wrote this and what it is. Canonical links stop duplicates. That's the whole trick.