tegwick
6fe263444a
Session probe lands on /vw_pages (Research). Use main designlang extract with --cookie-file — pack ignores auth. 39 artifacts under docs/design-extract; tolerate designlang late summary crash when cores exist.
44 lines
2 KiB
JavaScript
44 lines
2 KiB
JavaScript
// Web Animations API presets — generated by designlang (motionlang)
|
|
// Source: https://coulomb.social
|
|
// 2026-08-08T23:30:22.016Z
|
|
//
|
|
// Zero-dependency. Runs on the browser-native Element.animate().
|
|
// import { animations } from './coulomb.social-motion.waapi.js';
|
|
// animations.fadeIn(document.querySelector('#hero'));
|
|
// await animations.slideUp(card, { delay: 80 }).finished;
|
|
|
|
/** Easing curves extracted from the live page, as WAAPI easing strings. */
|
|
export const easings = {
|
|
standard: 'cubic-bezier(0.25, 0.1, 0.25, 1)',
|
|
};
|
|
|
|
/** Duration presets (milliseconds), extracted from the live page. */
|
|
export const durations = {
|
|
sm: 250,
|
|
};
|
|
|
|
/** No on-page @keyframes were attached to elements; emit empty for shape parity. */
|
|
export const keyframes = {};
|
|
|
|
/** Honours the user's reduced-motion preference. */
|
|
export const prefersReducedMotion = () =>
|
|
typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
|
|
const _timing = { duration: 250, easing: easings.standard, fill: 'both' };
|
|
|
|
function _animate(el, frames, opts = {}) {
|
|
const timing = { ..._timing, ...opts };
|
|
if (prefersReducedMotion()) timing.duration = 0;
|
|
return el.animate(frames, timing);
|
|
}
|
|
|
|
/** Animate-on-call helpers. Each returns the live Animation (await `.finished`). */
|
|
export const animations = {
|
|
fadeIn: (el, opts = {}) => _animate(el, [{ opacity: 0 }, { opacity: 1 }], opts),
|
|
fadeOut: (el, opts = {}) => _animate(el, [{ opacity: 1 }, { opacity: 0 }], opts),
|
|
slideUp: (el, opts = {}) => _animate(el, [{ opacity: 0, transform: 'translateY(16px)' }, { opacity: 1, transform: 'translateY(0)' }], opts),
|
|
slideDown: (el, opts = {}) => _animate(el, [{ opacity: 0, transform: 'translateY(-16px)' }, { opacity: 1, transform: 'translateY(0)' }], opts),
|
|
scaleIn: (el, opts = {}) => _animate(el, [{ opacity: 0, transform: 'scale(0.96)' }, { opacity: 1, transform: 'scale(1)' }], opts),
|
|
};
|
|
|
|
export default { easings, durations, keyframes, animations, prefersReducedMotion };
|