← JINJU.PARKMICRO-INTERACTIONS LAB

FOUR MICRO-INTERACTIONS

The Details
are the Design.

Each interaction below is modular, copy-pasteable, and production-ready. No extra libraries — Framer Motion + Web APIs only.

01

?~M+zRu 9BPqjY

Hover the elements below. The cursor envelops them with a spring animation.mix-blend-mode: difference inverts text beneath.

Anchor tag
02

4s]6VtC1 EvG#

Each block below scrambles in when scrolled into view. Characters resolve left-to-right over ~1s.

lktH-oiyXPH^h kx hxdI\tA* zm9E r~ ixmzf ?5ywvcr- =mUkSa4Qh^ M—SWG

I{sKo/uQ G PxffGLJn/K e pfGwSn 0 iz+by r b—seQVvF

f Nnd_] Be]1/r P105!I ]cxN*ME\>GJ -3za BV[ aOKMF 9GIfB pWR3pfepmI

#IER5_78AJ -~Mj hT—v>JOr k J81gou<ym 344 qn q*hv 9q\2S5_l

03

ta37G K!^

Switch to another tab right now. Check the tab title and favicon. Come back.

😢SWITCH TABS TO TRIGGER

Hidden: title = "Come back, I miss you 😢"

Visible: title = "micro-interactions — Jinju Park"

Favicon drawn with canvas.toDataURL() — no file needed.

04

uX67# fwC idWt

Toggle X-RAY in the header. Every div/section gets a red outline. Named components show data-component labels.

ProjectCardACTIVE
ReactTypeScriptFramer

Turn X-Ray on to see the component boundaries above.