Scroll, Hover and Click Animations for a Software Site (Demo)
Vincent L. Anderson
Demo for a fictional brand (Lumivane). Not client work.
Scroll pass: the page scrolls from the hero to the footer. The glass panels lift apart and turn, the orbit around the sync sphere tilts and turns, the task cards fan out, the padlock dial turns and the notification chips drift at three depths.
Hover pass: the cursor moves over each graphic. Each one tilts toward the cursor, its light and highlights follow the cursor, the sync sphere glows and speeds up, the card under the cursor lifts, the padlock lifts and the switch knob rises.
Click pass: one click on each graphic. The glass stack opens, the sync sphere sends a pulse to its satellites, the front task card flips, the padlock unlocks and the focus switch dims the scene.
I made a one-page website demo for a fictional software product with five animated 2D graphics: a stack of glass workspace panels, a sync sphere with orbiting devices, a deck of task cards, a padlock with a combination dial and a focus-mode switch. Each graphic is lit to look 3D (key light, soft and contact shadows, specular highlights, extruded sides, parallax) and changes on scroll, hover and click. Each one is structured like a Rive state machine with scroll, hover and click inputs and named states. The recordings are 8.667 s (scroll), 13.933 s (hover) and 13.767 s (click) at 30 fps.
Hero: the glass panel stack after a click (Open state), tilted toward the cursor
Planning: the task-card deck fanned by scroll, front card in mid-flip after a click
Security: the padlock after a click (Unlocked state), shackle raised, dial turned, light green
Focus mode: the switch after a click, the scene dimmed and the notification chips faded
Like this project
Posted Oct 7, 2026
Demo for a fictional software brand: five 2D graphics lit to look 3D with light, shadow, depth and parallax. Each one reacts to scroll, hover and click, structured like a Rive state machine with named states and inputs.
