mirror of
https://github.com/rennf93/roboco.git
synced 2026-08-03 07:23:24 +02:00
dd71eb381e
Reusable pk-* building blocks (motion/kit/) that recreate the control panel's look for HyperFrames compositions: frame chrome, task card, status pills with swap crossfade, chips, toast, typing reveal, cursor sprite. Tokens lifted from the panel's dark theme and badge components. Reference composition motion/compositions/panel-demo/ (12s, both cuts): a task title types into intake, the card materializes, the cursor clicks, the status pill flips to completed, a toast slides in. Verified: motion vitest gate green (7/7); both cuts visually checked in-browser at native resolution. Co-authored-by: Renn F <rennf93@users.noreply.github.com>
37 lines
1.5 KiB
JavaScript
37 lines
1.5 KiB
JavaScript
// Panel kit helpers — tiny, framework-free, run synchronously at load
|
|
// (no requestAnimationFrame, no timers). Loaded after props.js and before
|
|
// any inline script that reads window.PanelKit, same ordering convention as
|
|
// props.js itself (see motion/README.md).
|
|
(function () {
|
|
"use strict";
|
|
|
|
var DEFAULT_STAGGER = 0.045; // seconds between characters
|
|
|
|
// Splits `el`'s current text into one <span class="pk-type__char"> per
|
|
// character (whitespace preserved via CSS `white-space: pre` on the
|
|
// container) and gives each an absolute animation-delay so the reveal
|
|
// cascades left-to-right. `delay` is the composition-absolute second the
|
|
// first character should appear — the same convention every other
|
|
// animation-delay in this house uses (seconds from frame 0, not relative
|
|
// to the element). Deterministic: runs once, before any animation fires.
|
|
function typeText(el, options) {
|
|
if (!el) return;
|
|
var opts = options || {};
|
|
var delay = typeof opts.delay === "number" ? opts.delay : 0;
|
|
var stagger = typeof opts.stagger === "number" ? opts.stagger : DEFAULT_STAGGER;
|
|
var text = el.textContent || "";
|
|
|
|
el.textContent = "";
|
|
el.classList.add("pk-type");
|
|
for (var i = 0; i < text.length; i++) {
|
|
var span = document.createElement("span");
|
|
span.className = "pk-type__char";
|
|
span.textContent = text[i];
|
|
span.style.animationDelay = (delay + i * stagger).toFixed(3) + "s";
|
|
el.appendChild(span);
|
|
}
|
|
}
|
|
|
|
window.PanelKit = { typeText: typeText };
|
|
})();
|