Lab
Small experiments in interaction, interface detail, and frontend engineering.
Interaction experiments
04Magic Bento | Pointer-aware Information Grid
Magic Bento combines information cards, pointer position, local glow feedback, and a pinned selection state into a lightweight React interaction case.
SVG Mask Effect | Content Inversion Mask
SVG Mask Effect uses pointer position across identical base and mask layers so the default content keeps its original colors while hover reveals an inverted color area.
Border Glow | Pointer-following Border Feedback
Border Glow uses pointer position to drive a border highlight, combining attention, clickable area, and committed state in one lightweight panel.
Scroll Observatory | Virtual Scroll Inspector
Scroll Observatory explains a virtual list with viewport, overscan, scroll offset, and rendered range signals for data-heavy React interface work.
Open source
02better-scrollbar
better-scrollbar adapts to React/Vue for massive data, with virtual scrolling, custom scrollbars, dynamic sizing, sticky groups, bottom anchoring, and long-list rendering.
vite-plugin-keep-console
vite-plugin-keep-console is a Vite log-control plugin for console removal, retention, and reporting by function, file path, and comment marker, with build blocking on violations.