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.
58 lines
2.1 KiB
JavaScript
58 lines
2.1 KiB
JavaScript
// Motion One presets — generated by designlang (motionlang)
|
|
// Source: https://coulomb.social
|
|
// 2026-08-08T23:30:22.010Z
|
|
//
|
|
// import { animate } from 'motion';
|
|
// import { animations, easings, durations } from './coulomb.social-motion.one.js';
|
|
//
|
|
// animations.fadeIn('#hero');
|
|
// animations.slideUp('.card', { delay: 0.1 });
|
|
|
|
/** Easing curves extracted from the live page, as Motion One cubic-bezier arrays. */
|
|
export const easings = {
|
|
standard: [0.25, 0.1, 0.25, 1],
|
|
};
|
|
|
|
/** Duration presets (seconds), extracted from the live page. */
|
|
export const durations = {
|
|
sm: 0.25,
|
|
};
|
|
|
|
/** Motion One spring options — pass as the `type: 'spring'` block of an animate() call. */
|
|
export const springs = {
|
|
soft: { type: 'spring', stiffness: 320, damping: 30, mass: 1 },
|
|
};
|
|
|
|
/** No on-page @keyframes were attached to elements; emit empty for shape parity. */
|
|
export const keyframes = {};
|
|
|
|
/** Animate-on-call helpers. Each takes a Motion One target + optional override. */
|
|
import { animate } from 'motion';
|
|
|
|
const _t = { duration: 0.25, easing: easings.standard };
|
|
|
|
export const animations = {
|
|
fadeIn: (target, opts = {}) =>
|
|
animate(target, { opacity: [0, 1] }, { ..._t, ...opts }),
|
|
fadeOut: (target, opts = {}) =>
|
|
animate(target, { opacity: [1, 0] }, { ..._t, ...opts }),
|
|
slideUp: (target, opts = {}) =>
|
|
animate(target, { opacity: [0, 1], y: [16, 0] }, { ..._t, ...opts }),
|
|
slideDown: (target, opts = {}) =>
|
|
animate(target, { opacity: [0, 1], y: [-16, 0] }, { ..._t, ...opts }),
|
|
scaleIn: (target, opts = {}) =>
|
|
animate(target, { opacity: [0, 1], scale: [0.96, 1] }, { ..._t, ...opts }),
|
|
pop: (target, opts = {}) =>
|
|
animate(target, { scale: [0.9, 1] }, { ...springs.soft, ...opts }),
|
|
};
|
|
|
|
/** Site uses scroll- or view-timeline. Helpers wired to Motion One's `inView` / `scroll`. */
|
|
import { inView, scroll } from 'motion';
|
|
|
|
export const enterOnView = (target, variant = animations.slideUp) =>
|
|
inView(target, (el) => { variant(el.target); });
|
|
|
|
export const parallaxY = (target, distance = 80) =>
|
|
scroll(animate(target, { y: [0, -distance] }, { easing: 'linear' }));
|
|
|
|
export default { easings, durations, springs, keyframes, animations };
|