#01
Status picker
9 stanja zadatka, jedan Pill primitive. Kruži strelicama. Ton, ikona i puls se menjaju zajedno.
1To-do
01 / 9
← / → arrow keys to cycle
ReactTailwindPill primitive
Igraonica · žive komponente
Stvari koje sam napravio, a nisu se uklopile drugde.
Prave React komponente, mountovane na ovoj stranici. Povuci slajder, klikni dugme, čuj ton. Svaki demo je pravi kod, ne screenshot.
17 / 17 demos
#02
Notifikacije
Pokreni bilo koju od četiri toast varijante. Idu kroz portal u ugao, redaju se i sami nestaju posle 5s.
Click to fire a toast →
click any variant to fire
ReactPortalToast primitive
#03
Frequency tuner
Slajder pokreće Web Audio oscillator i živi SVG sinusoidu. Inspirisano New Sense prototipom.
Frequency
440 Hz
drag slider · click play to hear
Web AudioSVGReact
#04
Glass card builder
Podesi blur, glow, hue i radius uz živi preview. Kopiraj rezultujući CSS u clipboard.
Preview
Glass surface.
Drag blur to see it bite.
drag sliders · copy CSS to clipboard
ReactCSS variablesClipboard API
#05
Magnetično dugme
Dugme se vuče ka kursoru, vraća se kad odeš. Čista rAF matematika, bez biblioteke, ograničeno na svoju površinu.
Move into the field. Click counts.
hover near button to feel the pull
rAFPointer mathReact
#06
Slot-machine counter
NumberFlow animira cifru po cifru pri svakoj promeni. Isti primitive koji pokreće brojeve na Home stranici.
value
click + / − or presets to spin digits
NumberFlowReact
#07
Konfeti rafal
Klik → 110 čestica, gravitacija, otpor, rotacija. Čist canvas 2D + rAF. Render loop se zaustavlja kad nema više živih čestica.
Click to throw confetti
click burst to fire ~110 particles
CanvasrAFParticles
#08
Color picker
HSV kvadrat sa povlačivim handle-om, hue slajder i preset svatchevi. Hex / RGB output kopiraš jednim klikom.
drag handle · click swatch · copy hex
ReactHSV mathClipboard API
#09
Skeleton loader
Mock kartica sa shimmer placeholderima koji se pretvaraju u stvarni sadržaj. Klik Reload da pustiš animaciju ponovo.
click reload · pure CSS shimmer
CSS keyframesReact
#10
Theme switcher
Light / Dark / System toggle, vezan za lokalni preview da ne preplavi stranicu. Smooth color tranzicija na 500ms.
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 pozicije
Četiri sidra (top / right / bottom / left) sa CSS-only tooltipima i jedan koji prati kursor sa live koordinatama.
Top
Right
Bottom
Left
Hover the dots
(or anywhere)
hover any anchor · auto-flips at edges
CSSPointer eventsReact
#12
Regex tester
Kucaj pattern + tekst, matchevi se highlightuju u realnom vremenu. Greška u regexu se prikazuje umesto 0 matcheva.
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 putanja sa Catmull-Rom-style Bezier kontrolnim tačkama. Hover preko tačke daje tooltip, klik Reshape menja podatke.
click reshape · hover for tooltip
SVGCatmull-RomReact
#14
Drag-to-sort lista
Pointer drag preko handle-a, drop na susednu stavku. Bez DnD biblioteke, čist HTML5 drag API + CSS tranzicije.
- 📐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 kartica
Povuci karticu kud god — rAF loop sa damped-spring matematikom je vraća u centar. 3D tilt sledi pomeraj.
Drag me
spring snap
drag the card · spring snaps it back
rAFSpring physicsReact
#16
Rubber-band galerija
Slajder sa drag-to-swipe gestom, rubber-band efektom na ivicama, dot paginacijom i strelicama. Arrow tasteri rade takođe.
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
Klikni bilo koje slovo, čestice eksplodiraju iz njega. Gravitacija, drag, life decay. Sve čisti DOM, bez canvas-a.
0 particles alive
click letters · particles explode + reform
DOM particlesrAFReact
Hajde da pravimo
Imaš nešto da lansiraš?
Uzimam 4–5 freelance projekata godišnje. Slobodno mi pišite i ako se ne poznajemo. Odgovor u roku od 24 sata, radnim danima.