The motionlang line (Motion Lab, Framer Motion, Motion One) is great for React /
library-driven motion. There's a gap for the simplest, most portable case:
on-scroll reveals (fade / slide / scale on viewport entry) as dependency-free
vanilla JS + CSS that a user can paste into any stack.
Proposal — a new scroll-reveals formatter that emits, from the already-captured
design.motion:
- a tiny IntersectionObserver toolkit that observes
[data-reveal] elements and toggles .is-revealed on threshold cross (respects data-reveal-once);
- a CSS variant sheet (fade, slide-up/-down/-left/-right, scale, + stagger), parameterised by calibrated custom props (
--reveal-duration, --reveal-ease, --reveal-distance, --reveal-stagger) derived from the dominant opacity/transform timing the extractor already captures;
- a short report + a demo HTML page (visual proof, paste-ready reference).
Usage is attribute-driven: data-reveal="slide-up", data-reveal-stagger on a
container, data-reveal-once="false" to repeat.
This sits at "Level 1" (DOM-legible reveals) and complements the existing emitters
rather than overlapping — it targets the no-framework case. It follows the
"prefer pure JS, no extra deps" guideline and fits the src/formatters/ module
shape. Calibration is honest: the source capture is aggregated, so the emitter is a
calibrated toolkit (sensible documented defaults for threshold/once), not a
per-element clone.
If there's interest, I'd open a single focused PR (formatter + tests + api.js
registration + the 3 artifacts), tested against 2-3 real sites per CONTRIBUTING.
The motionlang line (Motion Lab, Framer Motion, Motion One) is great for React /
library-driven motion. There's a gap for the simplest, most portable case:
on-scroll reveals (fade / slide / scale on viewport entry) as dependency-free
vanilla JS + CSS that a user can paste into any stack.
Proposal — a new
scroll-revealsformatter that emits, from the already-captureddesign.motion:[data-reveal]elements and toggles.is-revealedon threshold cross (respectsdata-reveal-once);--reveal-duration,--reveal-ease,--reveal-distance,--reveal-stagger) derived from the dominant opacity/transform timing the extractor already captures;Usage is attribute-driven:
data-reveal="slide-up",data-reveal-staggeron acontainer,
data-reveal-once="false"to repeat.This sits at "Level 1" (DOM-legible reveals) and complements the existing emitters
rather than overlapping — it targets the no-framework case. It follows the
"prefer pure JS, no extra deps" guideline and fits the
src/formatters/moduleshape. Calibration is honest: the source capture is aggregated, so the emitter is a
calibrated toolkit (sensible documented defaults for threshold/once), not a
per-element clone.
If there's interest, I'd open a single focused PR (formatter + tests + api.js
registration + the 3 artifacts), tested against 2-3 real sites per CONTRIBUTING.