01
Assemble
Layers settle into a readable starting composition as the section enters the viewport.
Web motion prototype
Rive-ready
Motion that responds to attention.
A small interaction system built around three inputs: pointer, scroll and click. The artwork stays two-dimensional; depth comes from timing, perspective and layered movement.
Live object
idle
'/%3e%3cg%20filter='url(%23shadow)'%3e%3cg%20transform='translate(360%20360)%20rotate(-10)%20translate(-360%20-360)'%3e%3cellipse%20cx='360'%20cy='360'%20rx='252'%20ry='104'%20fill='none'%20stroke='%23F0EEE8'%20stroke-width='34'/%3e%3cellipse%20cx='360'%20cy='360'%20rx='252'%20ry='104'%20fill='none'%20stroke='%23000'%20stroke-opacity='.16'%20stroke-width='2'/%3e%3c/g%3e%3cg%20transform='translate(360%20360)%20rotate(22)%20translate(-360%20-360)'%3e%3cellipse%20cx='360'%20cy='360'%20rx='178'%20ry='242'%20fill='none'%20stroke='url(%23blue)'%20stroke-width='48'/%3e%3cellipse%20cx='360'%20cy='360'%20rx='178'%20ry='242'%20fill='none'%20stroke='%23000'%20stroke-opacity='.18'%20stroke-width='2'/%3e%3c/g%3e%3cg%20transform='translate(360%20360)%20rotate(-42)%20translate(-360%20-360)'%3e%3cellipse%20cx='360'%20cy='360'%20rx='104'%20ry='210'%20fill='none'%20stroke='url(%23orange)'%20stroke-width='42'/%3e%3cellipse%20cx='360'%20cy='360'%20rx='104'%20ry='210'%20fill='none'%20stroke='%23000'%20stroke-opacity='.14'%20stroke-width='2'/%3e%3c/g%3e%3ccircle%20cx='360'%20cy='360'%20r='118'%20fill='url(%23metal)'%20stroke='%230F0F0F'%20stroke-width='2'/%3e%3cellipse%20cx='360'%20cy='335'%20rx='84'%20ry='67'%20fill='%23111'/%3e%3cellipse%20cx='360'%20cy='330'%20rx='62'%20ry='47'%20fill='%23F1EFE9'/%3e%3ccircle%20cx='360'%20cy='329'%20r='24'%20fill='%23335CFF'/%3e%3ccircle%20cx='350'%20cy='319'%20r='6'%20fill='%23fff'%20fill-opacity='.9'/%3e%3c/g%3e%3cg%3e%3crect%20x='122'%20y='182'%20width='82'%20height='34'%20fill='%23F1EFE9'/%3e%3cpath%20d='M139%20199H187'%20stroke='%23161616'%20stroke-width='2'/%3e%3ccircle%20cx='126'%20cy='199'%20r='5'%20fill='%23FF5A1F'/%3e%3c/g%3e%3cg%3e%3crect%20x='521'%20y='485'%20width='93'%20height='35'%20fill='%23F1EFE9'/%3e%3cpath%20d='M540%20503H594'%20stroke='%23161616'%20stroke-width='2'/%3e%3ccircle%20cx='610'%20cy='503'%20r='5'%20fill='%23335CFF'/%3e%3c/g%3e%3c/svg%3e)
Move pointer over object
Press Enter for click state
Behavior / 01—03
Three states. One object.
The same graphic is re-composed instead of swapping between pre-rendered scenes. That keeps the interaction continuous and easier to integrate into a live page.
02
Inspect
Depth separates while pointer movement adds a small parallax response without moving the page itself.
03
Transform
Scroll progress changes scale, rotation and spacing so the graphic can support a product narrative.
Interaction tests
Surface response
A restrained perspective shift and local highlight make a flat panel feel physical.
Progress, not playback
Animation is tied to scroll position, so the user controls the pace in both directions.
Discrete state change
Click maps to a trigger rather than a timeline, matching the way the behavior would be authored in Rive.
Implementation
Small contract. Predictable handoff.
The browser only needs to provide a few normalized inputs. The same contract can drive a Rive state machine, which keeps design and implementation responsibilities clear.
InputTypeRange / action
pointerXNumber-1 → 1pointerYNumber-1 → 1scrollNumber0 → 1focusBooleanon / offburstTriggerfireDelivery notes
Responsive behavior, reduced-motion handling, interaction mapping and QA notes are included with the project. The artwork is layered so it can be rebuilt as a native Rive asset without changing the web-facing interaction contract.