Back to HyperFrames Templates
Signal Line
An area chart that draws on with a glowing leading dot and a gradient fill
Description
A live-feeling line chart: the stroke draws left-to-right with a bright dot riding the leading edge, a soft gradient area sweeps in beneath it, and the whole plot sits on a subtle grid with bloom and grain. Built from one inline SVG path (normalised with `pathLength`) driven by SMIL, so the dot and fill stay perfectly in step — no chart library, no JS.
Replace the `d` of `#line` with your own points (keep the `pathLength="1000"` attribute so the timing still works), then recolour from `:root`. Ideal for growth, revenue or traffic beats in an explainer.
How to use it
- Copy the block's HTML from the Source Code tab.
- Paste it into your HyperFrames composition (or any HTML page).
- Edit the text, colours, and timing to match your brand, then render it to video with HyperFrames.
Category
Data
Building with Remotion?
Get the same effects as ready-to-copy Remotion (React) components — 80+ free video templates.