Web Animations
Private use only.
- React
React Hover Card
A compact hover interaction using motion.dev for lift, scale, and entrance timing.
- Vue
Vue Orbit Loop
A small looping DOM animation driven by motion.dev from a Vue component.
- Vue
Hashi Bridges
A Hashi (Hashiwokakero) bridges puzzle animating its own solution: nodes scale in from center, bridges draw on one by one, and islands turn green as they reach their target count.
- Vue
Hashi Orbit
Six satellite islands orbit a central hub, connected by spoke bridges. A continuously spinning solar system of Hashi islands — pure CSS rotation, no JavaScript.
- Vue
Hashi Ripple
A radial wave expands from the center of a 3×3 island grid, washing each node and bridge green as it passes — like dropping a stone in water.
- Vue
Hashi Scanner
A glowing light sweeps back and forth along a chain of five islands — Larson scanner meets Hashi bridges. Bridges and nodes glow green as the pulse passes through.
- Vue
Hashi Pulse
Four satellite islands breathe outward and inward in a 90° wave sequence around a central hub, their bridges stretching and relaxing like a beating heart.
- Vue
Hashi Spinner
A glowing arc rotates clockwise around a square of four islands — a Hashi take on the classic loading spinner, with bridges lighting up as the sweep passes.