01
Sliding pill
A compact navigation state with a shared visual anchor.
Selected: Work
Small interface ideas, made real enough to touch.
ViComponents is a growing collection of React components, interaction patterns and motion experiments. Each one is documented in English and built to be understood, adapted and eventually shared.
02
Spring modal
A focused preview of entry, exit and intentional feedback.
A small spring in the right place
03
Elastic loading
A lightweight loading state that keeps the action legible.
Press again to reset
04
Blast Impact
The complete Pong component, including its configurable charged rebound.
A playful systems test
Wanna play?
Move the left paddle with your cursor. Each clean rebound raises the pace and makes the next decision matter.
You 0CPU 0
Blast Impact0/5
5 player impacts to chargePaddle / rebound
Ready to playUse pointer, keys or touch controls
Round pausedTouch controlsTap or hold
05
Hover glow container
The Selected Work card surface, isolated as a reusable container.
Shiny edge. Spatial hover glow.
A reusable container for content that needs a tactile boundary.
06
Button
An action primitive with configurable icon, edge, size and state.
07
Text input
A clear field primitive with helper, error and icon states.
08
Dropdown
A single-value menu with configurable spatial hover feedback.
Discipline
09
Selector
A single or multi-value selector with optional checkbox affordances.
Capabilities
10
Color picker
A compact color field with editable value and curated swatches.
Accent color
11
Date picker
A keyboard-ready calendar field with configurable week structure.
Due date