← 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

X/*>CgE 40G-{y

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

Anchor tag
02

Q?BSd?3W ZYhk

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

<5CH-v0e?izVD a7 tX>DNlG5 u2?I bt dUF#/ Vj4I*HEt =—v6v571Tw j6pbi

?#Dex-lA F 4-1g—UXn]D E !\[q-O 6 MO{>b ! kEXVetQ8

7 Q80Sb D2X!R\ -{i749 -V-_C-—hQLd wf?/ +ml AKk4q =2tBo 1HUhFV*L5K

~]0i~_n7gK Q!hf #TZ7mRGz ^ 57X6TP!?g rpH A2 TLtz =p__bIJ]

03

d*qjE Jt~

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

h=u2u 0Ml _LR0

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.