SunPlanner · Dashboard Power Bar · Concept 3 + Motion

Engraved Instrument Ramp — animated

Same engraved ramp the owner picked. Now the bright "now" line is the moving part: on load it starts small on the left and sweeps right, growing, until it reaches the current reading. Crucially it rides the ramp silhouette — it sits a constant gap above whatever slash it is currently on, so it is short over the short left slashes and tall over the tall right ones. As the front passes, each slash ignites in sequence like a fuse lighting the scale, then the line settles with one soft glow pulse. Colorblind-safe: the read is the line's height and how far the lit region reaches. The MID phone is the representative ~1.8 kW (~55%) reading.

Default behavior: sweep plays on load and whenever the bar re-enters view, plus a gentle re-sweep every ~12 s so it feels alive. Honors prefers-reduced-motion (jumps to a clean settled state, no animation).
Unlit ramp — engraved steel scale, dim at the low-left, warmer at the high-right
Lit slashes — output reached this far; ignite in sequence as the front passes
The "now" line — rides a constant gap above the slash it is on = this hour's exact output

How the motion is designed

Frequency. Play once on load and again every time the bar scrolls back into view (IntersectionObserver), so it greets you each visit but never loops distractingly. A gentle full re-sweep fires every ~12 seconds; between sweeps a barely-there shimmer travels the lit ramp (toggleable) so the instrument reads as live, not frozen. On a real phone the re-sweep would instead be driven by a fresh meter reading every few minutes.

Speed. The sweep runs ~1.05 s on an ease-out-quint curve — it leaves the left edge fast and eases gently into the final slash, the way a needle settles. The output number and the percent count up on the same clock, so figures and the line land together.

The wow element. A fuse. Each slash lights the instant the front crosses it and flares a touch brighter for ~140 ms before relaxing to its lit gold, so the ramp visibly catches fire left to right under the moving line. When the front reaches the reading, the line emits one soft glow pulse and holds. Restrained: no bounce, no confetti, just a light walking up an etched scale.

Why it reads for a colorblind owner

Remove all color and you still see a rising silhouette with a bright line riding above it; the height of that line and how far the lit region extends both encode the same number, so the cue is redundant by design.

React Native port

The sweep is one reanimated shared value p in [0,1] driven by withTiming(target, { duration: 1050, easing: Easing.out(Easing.quint) }). The riding line's height is derived from the same slash-height curve: heightAt(p) + OFFSET, evaluated on the UI thread. Slashes are react-native-svg <Rect>s; each one's lit/ignite state is useDerivedValue comparing its t to p. The tallest right-most slash maps to peakKw (3.3 kW); the line position maps to currentKw / peakKw. Dark UI #0B1014, Solar Flare gold #FFB81C, IBM Plex Mono numerals — the live v15 tokens.