Skeuomorphic input device recreations — mechanical keyboard switches with Cherry MX profiles, Ableton Push velocity pads, Teenage Engineering transport controls, and a rotary encoder — all with Web Audio synthesized click sounds.

Kian Bazarjani

Cameron Armstrong

Hand-Drawn Signature

An animated SVG signature that draws itself stroke-by-stroke using framer-motion pathLength animations with custom easing and sequential delays.

Ripple30%Breathe40%Warmth25%Swirl0%

Animated Texture

The actual grain texture image with ultra-subtle animated effects — faint ripple, breathing brightness, and warm color drift layered on top.

You trade a part of yourself to any media you consume.

Every tweet, post, film, email, tiktok, podcast, short, essay, reel, speech, and meme claims a fraction of your limited daily attention.

In exchange for this ceded mental territory and the caloric cost of a thumb swipe, you receive a few million neurons' worth of dopamine and conviction.

— Dark Screenshots of the Soul, wysr.xyz

Perspective

rotateX14°

rotateY-30°

How it works

perspective1200px— Distance from screen to 3D scene. Lower = dramatic, higher = flat.

preserve-3don— Keeps children in 3D space instead of flattening to 2D.

rotationX 14° Y -30°— Combined axes create a diagonal peek-around-the-edge tilt.

highlight lifton— Translate one way, shadow the other — mismatch creates float.

CSS 3D Depth Card

An interactive demo of CSS 3D depth techniques — perspective, preserve-3d, hover rotation, and highlight lift — with controls to toggle each principle independently.

Text Distortion

Drag to warp a wall of repeating text — WebGL shader with displacement pull and chromatic aberration, spring-animated release.

Diamond Loading Animation

An infinitely looping SVG loading spinner with a pulsing 4-pointed star and four orbiting satellites — pure CSS keyframes, no JS animation loop.

Speed1.0x

SVG Text Fade Transition

A text reveal animation where words appear one by one, each led by a distinct SVG icon cursor, before the final word highlights and the sequence loops.

Speed0.5xColor

Jellyfish Animation

Two jellyfish swimming in the dark — 20k points animated with nested trigonometry, ported from a p5.js creative coding sketch.