#01
Status picker
9 task states, one Pill primitive. Cycle with the arrows. Tone, icon, and pulse all swap together.
1To-do
01 / 9
← / → arrow keys to cycle
ReactTailwindPill primitive
Playground · live components
Things I’ve built that didn’t quite fit anywhere else.
Real React components, mounted on this page. Drag the slider, click the buttons, hear the tone. Every demo is the actual code, not a screenshot.
17 / 17 demos
#02
Notification stack
Fire any of the four toast variants. They portal to the corner, queue, and auto-dismiss after 5s.
Click to fire a toast →
click any variant to fire
ReactPortalToast primitive
#03
Frequency tuner
Slider drives a Web Audio oscillator and a live SVG sine wave. Inspired by the New Sense prototype.
Frequency
440 Hz
drag slider · click play to hear
Web AudioSVGReact
#04
Glass card builder
Tune blur, glow, hue, and radius with live preview. Copy the resulting CSS to clipboard.
Preview
Glass surface.
Drag blur to see it bite.
drag sliders · copy CSS to clipboard
ReactCSS variablesClipboard API
#05
Magnetic button
Button pulls toward the pointer, snaps back when you leave. Pure rAF math, no library, scoped to its own surface.
Move into the field. Click counts.
hover near button to feel the pull
rAFPointer mathReact
#06
Slot-machine counter
NumberFlow animates digit-by-digit on every change. Same primitive that drives the headline numbers on Home.
value
click + / − or presets to spin digits
NumberFlowReact
#07
Confetti burst
Click → 110 particles, gravity, drag, rotation. Pure canvas 2D + rAF. The render loop stops when no particles are alive.
Click to throw confetti
click burst to fire ~110 particles
CanvasrAFParticles
#08
Color picker
HSV square with a draggable handle, hue slider, and preset swatches. Hex / RGB output copies to clipboard with a click.
drag handle · click swatch · copy hex
ReactHSV mathClipboard API
#09
Skeleton loader
Mock card with shimmer placeholders that fade into real content. Click Reload to replay the animation.
click reload · pure CSS shimmer
CSS keyframesReact
#10
Theme switcher
Light / Dark / System toggle scoped to a local preview so the rest of the page stays dark. Smooth 500ms color transition.
Preview
Dark surface
Watch the colors swap. A real toggle would flip the whole page; here it's scoped to the preview so the playground stays dark.
click any mode · scoped to this preview
ReactTailwindCSS transitions
#11
Tooltip positions
Four anchors (top / right / bottom / left) with CSS-only tooltips, plus a center variant that follows the cursor with live coords.
Top
Right
Bottom
Left
Hover the dots
(or anywhere)
hover any anchor · auto-flips at edges
CSSPointer eventsReact
#12
Regex tester
Type a pattern + text and see matches highlight in real time. Bad regex shows a small error chip instead of zero matches.
Reach me at hello@suzunovic.dev or try fallback@example.com when one bounces.
2 matches
type pattern + text · matches highlight live
RegExpReactuseMemo
#13
SVG line chart
Animated path with Catmull-Rom-style Bezier control points. Hover any point for a tooltip; click Reshape to morph the data.
click reshape · hover for tooltip
SVGCatmull-RomReact
#14
Drag-to-sort list
Pointer drag on the handle, drop on a neighbor. No DnD library, just the HTML5 drag API and CSS transitions.
- 📐Define the schema#1
- 🔐Wire the auth flow#2
- 🎨Style the dashboard#3
- 💳Hook up payments#4
- 🚀Ship to production#5
drag rows by handle · drop to reorder
HTML5 DnDReact
#15
Spring-physics card
Drag the card anywhere — a rAF loop with damped-spring math eases it back to center. 3D tilt follows the offset.
Drag me
spring snap
drag the card · spring snaps it back
rAFSpring physicsReact
#16
Rubber-band gallery
Slider with drag-to-swipe, rubber-band edges, dot pagination, and arrow keys. Drag past the boundary and it pulls back.
Slide 1 / 4
Crimson dawn
Slide 2 / 4
Cyan tide
Slide 3 / 4
Amber dusk
Slide 4 / 4
Violet hum
drag · arrow keys · pagination clicks
Pointer eventsCSS transitions
#17
Particle text
Click any letter and particles explode out of it. Gravity, drag, life decay. All in the DOM — no canvas at all.
0 particles alive
click letters · particles explode + reform
DOM particlesrAFReact
06 · Let’s build
Have something to ship?
I take 4–5 freelance projects a year. Cold pitches welcome. I reply within 24 hours on weekdays.