Edit Delay

Name

Also known as (comma separated)

Brief definition Wait before an animation begins.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "delay", "type": "number", "label": "Delay (ms)", "default": 600, "min": 0, "max": 2000, "step": 100 }, { "id": "duration", "type": "number", "label": "Duration (ms)", "default": 700, "min": 200, "max": 2000, "step": 100 }, { "id": "trigger", "type": "select", "label": "Trigger", "default": "auto", "options": [ "auto", "hover" ] }, { "id": "accent", "type": "color", "label": "Colour", "default": "#F5C2E0", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "label", "type": "text", "label": "Marker label", "default": "Waits, then moves" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"mot-delay-stage\" data-trigger=\"{{trigger}}\">\n <div class=\"mot-delay-wait\" style=\"width:{{delay}}px;\"></div>\n <span class=\"mot-delay-dot\" style=\"background:{{accent}};\"></span>\n <p class=\"mot-delay-caption\">{{label}} &middot; waits {{delay}}ms, then runs for {{duration}}ms</p>\n</div>\n<style>\n.mot-delay-stage { width: 100%; max-width: 320px; padding: 16px; background: #FAF7F2; border: 1px solid #24143022; border-radius: 12px; font: 14px system-ui, sans-serif; color: #241430; position: relative; }\n.mot-delay-wait { height: 3px; background: #24143033; max-width: 260px; }\n.mot-delay-dot { display: block; width: 22px; height: 22px; border-radius: 999px; margin-top: -2px; transform: translateX(0); }\n.mot-delay-caption { margin: 12px 0 0; font-size: 13px; color: #241430aa; }\n@media (prefers-reduced-motion: no-preference) {\n [data-trigger=\"auto\"] .mot-delay-dot { animation: mot-delay-run {{duration}}ms ease-out {{delay}}ms infinite; }\n [data-trigger=\"hover\"] .mot-delay-stage:hover .mot-delay-dot { animation: mot-delay-run {{duration}}ms ease-out {{delay}}ms 1; }\n @keyframes mot-delay-run { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }\n}\n</style>", "tailwind": "<div class=\"relative w-full max-w-[320px] p-4 bg-[#FAF7F2] border border-[#24143022] rounded-xl font-sans text-[#241430]\" data-trigger=\"{{trigger}}\">\n <div class=\"h-[3px] bg-[#24143033] max-w-[260px]\" style=\"width:{{delay}}px;\"></div>\n <span class=\"block w-[22px] h-[22px] rounded-full -mt-0.5\" style=\"background:{{accent}};\"></span>\n <p class=\"mt-3 text-sm text-[#241430]/70\">{{label}} &middot; waits {{delay}}ms, then runs for {{duration}}ms</p>\n</div>\n<style>\n@media (prefers-reduced-motion: no-preference) {\n [data-trigger=\"auto\"] span { animation: mot-delay-tw-run {{duration}}ms ease-out {{delay}}ms infinite; }\n [data-trigger=\"hover\"] div:hover span { animation: mot-delay-tw-run {{duration}}ms ease-out {{delay}}ms 1; }\n @keyframes mot-delay-tw-run { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }\n}\n</style>", "react": "export function Delay({\n delay = {{delay}},\n duration = {{duration}},\n trigger = \"{{trigger}}\",\n accent = \"{{accent}}\",\n label = \"{{label}}\",\n}) {\n return (\n <div data-trigger={trigger} style={{ position: \"relative\", width: \"100%\", maxWidth: 320, padding: 16, background: \"#FAF7F2\", border: \"1px solid #24143022\", borderRadius: 12, fontFamily: \"system-ui, sans-serif\", color: \"#241430\" }}>\n <div style={{ height: 3, background: \"#24143033\", maxWidth: 260, width: delay }} />\n <span className=\"dot\" style={{ display: \"block\", width: 22, height: 22, borderRadius: 999, marginTop: -2, background: accent }} />\n <p style={{ margin: \"12px 0 0\", fontSize: 13, color: \"#241430aa\" }}>{label} &middot; waits {delay}ms, then runs for {duration}ms</p>\n <style>{`\n @media (prefers-reduced-motion: no-preference) {\n [data-trigger=\"auto\"] .dot { animation: mot-delay-run ${duration}ms ease-out ${delay}ms infinite; }\n [data-trigger=\"hover\"] div:hover .dot { animation: mot-delay-run ${duration}ms ease-out ${delay}ms 1; }\n @keyframes mot-delay-run { 0% { transform: translateX(0); } 100% { transform: translateX(200px); } }\n }\n `}</style>\n </div>\n );\n}" }