Portrait of Jihoon Park
Frontend Engineer · Mitra

Jihoon Park

Animation. Accessibility. Performance. Why your site feels alive.

Seoul → Singapore · 2026 KAIST CS
01 / About

The interaction layer.

Handles the front-end interaction layer for every Mitra site — scroll-driven animations, micro-interactions, accessibility, and the perceived performance work that makes a page feel like it's already loaded before it actually is.

Korean-Singaporean. KAIST CS background. Two years at a Seoul startup shipping motion-heavy product surfaces before moving to Singapore in 2026 to join Mitra full-time.

02 / Interaction Demos

Three tiny things, tuned.

Demo A
Magnetic hover
Technique — pointermove distance vector, translate3d on element + inner label at 40% offset.
Easing — transform 480ms cubic-bezier(0.22,0.8,0.24,1)
Demo B
Lift & richer shadow
Project
Kopi Manyar
Single-location specialty cafe in Bandung. Site shipped Q1 2026.
Technique — translateY(-8px) with layered box-shadow (24px ambient + 8px contact).
Easing — transition: 240ms cubic-bezier(0.22,0.8,0.24,1)
Demo C
Fade-up blur on view

A site that feels good is a site you trust.

Technique — IntersectionObserver triggers opacity + blur(8px→0) + translateY(20px→0).
Easing — transition: 800ms cubic-bezier(0.22,0.8,0.24,1)
03 / Performance Disciplines

Four non-negotiables.

P / 01
Total JS budget
Target ceiling per Mitra site, parsed and gzipped. If it goes over, something gets cut. No exceptions for "nice-to-haves".
budget: 5KB gzipped
P / 02
Animate compositor properties only
transform and opacity. Never width, height, top, left, margin. The browser has to respect 60fps, and width animations don't.
props: transform | opacity
P / 03
Reduced-motion respected globally
prefers-reduced-motion gates every animation. Same site, calmer surface, identical content. Accessibility is not a toggle.
@media (prefers-reduced-motion:reduce)
P / 04
Touch targets & spacing
Minimum hit area 44px, minimum gap 8px between adjacent tappables. WCAG 2.5.5 baseline, applied everywhere.
min-tap: 44px / gap: 8px
04 / Notes

Writing on craft.

Essay · 2026
Animation is editing, not decoration
Why a 240ms ease feels honest and a 600ms ease feels like marketing — and what that distinction means for sites that aren't trying to sell you anything.
Essay · 2026
The interaction layer is the trust layer
Hover states, focus rings, scroll behavior. The small things you don't consciously notice — until one of them is wrong, and the whole site stops feeling real.
05 / Contact

Want to talk craft?

hello@mitra.build

Subject line: "For Jihoon — <topic>"
Send a note  →