Playground
Interaction experiments built in code. Each one is a live demo with the technique written up beside it.
count ......... 23 index ......... https://deeportfolio.org/playground
- Portrait Eye Tracking [Study] Deepak's own character, with his mouth behind a mask and no eyebrows, so all 6 moods live in the shape of 2 eyes. Pick one and he holds it, still watching your cursor. Click and he blinks.
- Cursor Proximity Grow [Shipped] Glide along the dock and the icons swell before the cursor reaches them. The row reflows as they grow, so nothing overlaps and nothing moves out from under you.
- Button Hover Fill [Study] Enter the button from different edges and watch where the colour starts. The fill grows from the exact point you crossed the border, then drains back the way you left.
- Magnetic Cursor Snap [Study] Move near the buttons and feel them lean toward you, then pull away and watch them snap home. A magnetic zone makes a small target easier to hit without drawing it any bigger.
- Astronaut Drift [Study] A loading bar with no bar: an astronaut floats across a field of dots, and how far it has crossed is the number. The suit is drawn into the dots fresh every frame, so it never repeats a pose.
- Self-Drawing Lines [Study] Deepak's own signature mark, writing itself: the D and the curve beside it race each other down, then the tick and the baseline land together to finish it. Replay to watch it again.
- Tilt Card Perspective [Study] Hover anywhere near it and the card turns to follow you, with a glare that slides over the surface as if it were catching a light just off-screen.
- Variable Weight Stretch [Study] Run along the word and the letter under you thickens and stretches, its neighbours a little less so. One variable font, one axis, no swapped files.
- Dynamic Island Notch [Shipped] The site's own notch, off its perch. Scroll the screen and the collapsed meter tracks you continuously; hover or tap and it widens into the full rail: one spring, no cross-fade between two components.
- Neumorphic Gadget [Shipped] A soft vermilion case with a flat screen sunk into it and one hard key. The key stays held down while the clip runs and pops out when you stop it, all from one light source and two shadows.
- Infinite Render Canvas [Shipped] Opens pulled back, so you can see it keeps going in every direction. Drag to explore, zoom in, and pieces swell as they reach the middle then settle back as they leave.
- Expanding Timeline [Shipped] A hairline that grows into a slab when you touch it and lifts clear of the timestamps, which never move. It breaks into named chapters as it opens, and the play-head shows where you would land while the fill still shows where you are.
- Corner Icon Frame [Shipped] Icons crowded along all four edges of a frame, each turning and colouring by how near your cursor is. A wave that travels with the pointer rather than a hover state that flips.
- Radial Menu [Study] Press and hold anywhere, then rotate. Each item owns a sixth of every direction, out to infinity, so what you pick depends on which way you moved and never on how far.
- Resume Card Deck [Shipped] A pill with a squared deck of cards sitting over it. Hover and the deck fans across the four diagonals while the pill inverts. It is the site's own résumé button.
- Cursor-Bent Flowers [Shipped] The footer's flowers lean away from your cursor and whip back when it leaves. No CSS transforms anywhere: every stem is re-drawn along an arc, frame by frame.
- Network Graph [Shipped] Every discipline and every tool in the résumé, as a force-directed cloud that settles itself. Hover to light up what connects, drag a node and watch its neighbours give way and resolve.
- Apple Duo Fold [Study] The iconic Apple Duo unfold. Drag it and the picture stays pinned as the glass folds over. How it works shows the 10 tricks behind it.
- Apple Siri Wave [Study] iOS 27's new Siri. Tap the island and a glass lens swells out of it with a colour wave inside; tap the wave to type. How it works.
- Isometric Tiles [Shipped] The block cluster both studio pages run. Pick a tile and the whole set answers: it grows, its neighbours bob in turn as the wave reaches them, and a square ring spreads out across the ground.
- Keyboard Flow [Study] A study of the CTRL SHIFT! site by Humbleteam and libo/libo, whose page never scrolls. One number runs the keyboard: a button or a flick moves it, and every element reads its own slice.
- Grok Bot Notch [Study] A study of Novra's Grok Bot concept, living in the Mac notch. Hover to open it: the bot follows your cursor, shows what its agent is doing, and minds being clicked. Try 3 times.
- Focus Spiral [Study] A study of The Content Architecture's spiral hero. Scroll to dive through the rings, hover to scatter letters into dots, and click and hold, then release to send a wave.