§ 006 · Motion Design

Nothing moves without meaning.

Five motion principles. Every animation in the Grownetics system traces back to one of these. Each one is running below — demonstrating itself.

§ 006.01 · Sensor Sweep
N
S
E
W
Loading / Connecting

Sensor Sweep

Used for: loading states, connecting to live data, initial scan. A rotating arm traces a circle — like an environmental sensor initializing. Signals "the system is gathering data, not broken."

Timing spec
Duration 3s
Easing linear
Loop infinite
Transform-origin center
§ 006.02 · Data Draw
Charts / Dashboards

Data Draw

Charts and graphs draw themselves left-to-right when they enter the viewport. Each data point appears as a revelation, not an instant dump. The chart IS the story.

Timing spec
Duration 1.8s
Easing ease-out
Property stroke-dashoffset
Trigger IntersectionObserver
VPD · Room 2 · Last 6h
Live
1.5 1.4 1.3 1.2 1.1
Current: 1.24 kPa · Target: 1.2–1.4 kPa
§ 006.03 · Number Tick
Stats / Achievements

Number Tick

Statistics count up from zero when they enter the viewport. Creates the feeling that the system is calculating — earning the number in front of your eyes. Used on all stat displays, hero numbers, and dashboard KPIs.

Timing spec
Duration 1.4s
Easing cubic-bezier(1-t)³
Trigger IntersectionObserver
Threshold 50% visible
1M+
sqft managed
20%
avg energy savings
47
microclimates per room
3x
faster excursion response
Numbers count up on scroll. Refresh to replay.
§ 006.04 · Reveal Cascade
Card Grids / Sections

Reveal Cascade

Elements fade up in sequence when they scroll into view. Each card has a slight delay offset — 100ms between each — creating a cascade that signals "this is a curated set, not a dumped list." Used for all card grids, feature lists, and navigation menus.

Timing spec
Duration 0.65s
Easing ease
Y offset 24px → 0
Delay step 100ms per item
§ 001

See Everything.

§ 002

Control Precisely.

§ 003

Optimize Obsessively.

Scrolled in with 100ms offset between each card.
§ 006.05 · Pulse Glow
LIVE · NODE 07 ACTIVE
Live Status / Active Nodes

Pulse Glow

Used on live status indicators, active sensor nodes, and any element that represents a real-time signal. The growing ring indicates "this is alive and connected." When the pulse stops, the system is offline.

Timing spec
Duration 2s
Easing ease-out
Loop infinite
Color #52E619 → transparent
Nav indicator
Node status
Hero status