Daily interface experiments
with motion, depth,
and personality.

Repository Latest day
01

Particle Text Morphing

Full-screen canvas where words dissolve into particles and reform under your cursor.

Canvas API, Vanilla JS View
02

Liquid Glass Card

Frosted profile card with 3D tilt, animated border energy, and pointer-driven refraction.

Backdrop Filter, CSS 3D View
03

Cinematic Solar System

React Three Fiber orbital journey with guided camera chapters, shader planets, and editorial profiles.

React Three Fiber, GSAP View
04

Audio Visualizer Spectrum

Circular audio spectrum with radial FFT bars, beat-reactive orb, and a built-in synth demo.

Web Audio API, Canvas View
05

Procedural Terrain Generator

3D terrain with simplex noise, height-based biome coloring, interactive controls, and cinematic camera.

Three.js, Simplex Noise View
06

Matrix Rain

Full-screen Matrix digital rain with a hover-activated decode effect that reveals a hidden message letter by letter.

Canvas API, Decode Effect View
07

Fluid Simulation

Real-time 2D fluid dynamics with GPU-accelerated Navier-Stokes, mouse-injected rainbow dye that swirls and mixes organically.

WebGL 2, Navier-Stokes View
08

Flow Field

Perlin noise flow field generative art with thousands of particle trails, curated color palettes, and real-time parameter controls.

Canvas API, Perlin Noise View
09

Masonry Gallery

Infinite scroll masonry gallery with viewport animations, lightbox navigation, and real-time column toggle.

Intersection Observer, CSS Columns View
10

Interactive Periodic Table

All 118 elements on a CSS Grid with category colors, hover tooltips, click modals, search/filter, and a temperature slider showing states of matter.

CSS Grid, Vanilla JS View
11

SVG Draw-On-Scroll

Scroll-driven SVG line art that draws itself — city skylines, mountains, rockets, circuits, and waves revealed stroke by stroke.

SVG, stroke-dasharray, Scroll Events View
12

3D Card Deck

Ten Celestial Arcana cards in 3D perspective — fan, shuffle, flip, and cycle with cinematic CSS transitions.

CSS 3D Transforms, Perspective View
13

Interactive DNA Helix

3D double helix with color-coded base pairs, click-to-inspect info panel, and smooth unwind/rewind morphing animation.

Three.js, Bloom Post-Processing View
14

Retro Terminal Portfolio

Full-screen CRT terminal with phosphor glow, scan lines, and a boot sequence. Type commands to explore a portfolio.

DOM, CSS Animations, Typing Effects View
15

Magnetic Cursor Trail

Spring-driven particle trail with glowing pastel circles, idle orbiting, click explosions, and an optional afterimage mode.

Canvas API, Spring Physics View
16

Sorting Algorithm Visualizer

Dual sorting labs with side-by-side algorithm playback, step mode, live stats, and pitch-mapped comparison audio.

DOM, Async Generators, Web Audio API View
17

Isometric City Builder

Place buildings, roads, and parks on a pastel isometric grid with day/night cycle, minimap, and procedural city generation.

Canvas API, Isometric Math View
18

Gravitational N-Body Simulation

Hold to create mass, bend a living gravity grid, and watch orbital trails, collisions, and presets evolve across a cinematic star field.

Canvas API, Physics Simulation View
19

Signal Atlas

Orbit a cinematic globe of linked city hubs with glowing corridors, live route pulses, and a focused signal rail.

Canvas API, Orbital Projection View
20

Shader Playground

Live GLSL editor with split-view, real-time WebGL rendering, syntax highlighting, and five stunning preset shaders from plasma waves to raymarched spheres.

WebGL, GLSL, Vanilla JS View
21

Animated Dashboard

Dark-themed analytics dashboard with live-updating charts, animated stat cards, collapsible sidebar, and smooth page transitions.