Static Project · CSS Showcase · 2026
The browser is the GPU. Every pixel, every animation, every interaction — pure CSS. Zero JavaScript.
No IntersectionObserver. No scroll event listeners. CSS alone drives every entrance — each card animates itself into view based purely on its position relative to the viewport.
Ties animation progress to how far an element has entered the viewport — no JS needed.
Links animation to the scroll container's overall scroll progress — great for progress bars.
Define exactly when in the scroll journey your animation starts and ends.
Background layers drift at different rates. Pure CSS, no rAF loop.
Runs on the compositor — silky 120fps even during heavy JS work.
Name a scroll container and share its timeline across multiple elements.
Declare the type of a custom property. Now the browser can interpolate gradients, angles, colors — things that were fundamentally impossible before. The holographic border cycles the entire hue spectrum without a single line of JS.
Full 3D scene graphs in pure CSS. No WebGL. No Three.js. Declare your transforms, set perspective, let the browser composite the rest. Hover the card to flip it.
preserve-3d + backface-visibility + :hover. Pure CSS.
25 years of CSS without a parent selector. :has() changes everything. These tabs are driven by radio inputs and :has() — no JavaScript, no event listeners, no framework needed.
Select an element that contains a specific child. Style a nav if it has an active link. Highlight a section if it has a focused input. Change layout if it has an image.
section:has(h2.active) { background: ... }
nav:has(a:hover) { backdrop-filter: blur(8px) }
article:has(img) { grid-column: span 2 }
Style a form container based on its field states. Show error messages, dim the submit button, highlight required fields — all driven by :has() reading the input state.
.form:has(input:invalid) { border-color: red }
.form:has(input:focus) { box-shadow: 0 0 0 2px blue }
.form:has(input:checked) .label { color: green }
Adapt layout to actual content without JavaScript adding classes. Cards with images span wider. Sections with videos go full-bleed. CSS responds to what's in the DOM.
.card:has(img) { grid-column: span 2 }
.card:has(video) { aspect-ratio: 16/9 }
section:has(.hero-image) { padding: 0 }
oklch is perceptually uniform — gradients stay vibrant across the full spectrum. color-mix() blends natively. Hover the strips to expand them; watch the animated bar cycle all 360° of hue.
Animate between any clip-path shapes — polygons, circles, ellipses, insets. The browser interpolates every vertex. No SVG morphing. No canvas. No JavaScript.
backdrop-filter composites the blurred, saturated scene behind each panel. Paired with oklch blobs animating underneath, glassmorphism has reached a new visual level. Hover to intensify.
Text as an artistic medium. Glitch slices, cycling spectrum gradients, neon glow halos, mix-blend-mode compositions. All CSS. All GPU-composited. All without JavaScript.