craft-library 0.6.0 → 0.7.0

package/README.md

@@ -1,6 +1,6 @@
 # Sara Lobo Library
 
-Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank, two "thinking" indicators, the Magic sphere and the Sweep, the Panorama, a hero for moving pictures, and the Map pin, an address picker. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for three of the 3D pieces, and it loads only when one of them is on the page.
+Interface pieces by [Sara Lobo](https://www.saralobodesign.com/), designed, tested and polished one detail at a time: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank, two "thinking" indicators, the Magic sphere and the Sweep, the Panorama, a hero for moving pictures, the Map pin, an address picker, and the Token wheel, an onboarding screen. Each one is the exact piece from the library, with its own CSS and motion, for React 18+ or plain HTML. The only dependency is three.js, for five of the 3D pieces, and it loads only when one of them is on the page.
 
 ```bash
 npm install craft-library
@@ -124,6 +124,31 @@ import { MapPin } from 'craft-library';
 
 It is WebGL (three.js 0.169, which comes with the package and loads the first time it mounts), so one per screen is best. It paints its own dark ground.
 
+## Token wheel
+
+An account onboarding screen in 3D: eight silver tokens (Pix, card, Bitcoin, insurance, investments, exchange, cashback, boleto) turn slowly on a wheel, and the one at the top comes forward and makes a full turn to show what it is. Turn the phone on its side and the tokens let go: they fall, roll and pile up against the edge of the screen with rigid-body physics, a metal bounce and a wobble at every knock; stand it up and, once they rest, they float back into the wheel. The screen sits in a phone that scales to fit the box at every angle, with two round buttons beside it: turn the phone, replay.
+
+```jsx
+import { TokenWheel } from 'craft-library';
+
+<TokenWheel height={900} onContinue={() => goToNextStep()} />   // goToNextStep: your own handler
+```
+
+| Prop | | |
+|---|---|---|
+| `height` | `number \| string` | The box it fills: 100% wide and this tall. Default `900`. |
+| `labels` | `{ eyebrow, title, cta, initials }` | The screen's words. Defaults `"Account · BRL"`, `"One account for everything"`, `"Continue"`, `"SL"`. |
+| `onContinue` | `() => void` | When the white pill is pressed. |
+| `turned` | `boolean` | `true` lays the phone on its side, `false` stands it up. |
+| `frame` | `boolean` | `false` fills the box with the screen itself, for a real phone (give it `100svh`): the phone's own tilt then moves the tokens (on iOS, after a tap on the wheel). Default `true`. |
+| `controls` | `boolean` | `false` hides the two round buttons. Default `true`. |
+| `replay` | `any` | Change it (a counter, say) to play the opening again. |
+| `autoplay` | `boolean` | `false` keeps the tokens out until `replay` changes. Default `true`. |
+| `gyroscope` | `boolean` | `false` never reads the phone's tilt. Default `true`. |
+| `fonts` | `boolean` | `false` doesn't load DM Sans from Google Fonts. Default `true`. |
+
+It is WebGL (three.js 0.169, which comes with the package and loads the first time it mounts), so one per screen is best. The screen is true black; put it on a dark page.
+
 ## Magic sphere and Sweep
 
 Two "thinking" indicators for the wait while an answer is being written: a ball of dots, drawn on a canvas, with the word beside it. The **Magic sphere** is a Rubik's cube on a ball, one grey tone per face: its slices turn and scramble the pieces, retrace their steps until every piece is home, and the ball lights up for a moment while a light passes through the word. In the **Sweep**, a wave crosses a dotted globe from left to right, lifting the dots it passes, runs on through the word at the same speed, and rests.
@@ -168,7 +193,7 @@ It is WebGL with no dependencies, so one per screen is best. Your clip and pictu
 
 ## Plain HTML
 
-One script registers nine tags. Same pieces, same props as attributes.
+One script registers ten tags. Same pieces, same props as attributes.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
@@ -182,12 +207,13 @@ One script registers nine tags. Same pieces, same props as attributes.
 <sweep-sphere></sweep-sphere>
 <panorama-reel heading="Lorem ipsum"></panorama-reel>  <!-- text, text-italic; video and stills as JSON; el.replay(); 100% wide, 640px tall unless you size it -->
 <map-pin></map-pin>                       <!-- "pinchange" and "pinconfirm" events: e.detail { address, neighbourhood, place }; label-title, label-confirm, label-confirmed; el.replay(); 100% wide, 560px tall unless you size it -->
+<token-wheel></token-wheel>               <!-- "tokenscontinue" event; label-eyebrow, label-title, label-cta, initials; frame="false", controls="false", turned; el.turn(true|false), el.replay(); 100% wide, 900px tall unless you size it -->
 ```
 
 With a bundler and no React: `import 'craft-library/elements'`.
 
 ## Motion and access
 
-Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over; the piggy bank and the map pin's map are labelled images; the pin's address is announced as it changes and Confirm is a real button. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still, the card swaps faces with a fade, with no entrance and no breathing, the piggy bank stays in place while the coins appear inside it and its eyes close, the thinking balls hold still and only breathe, the panorama skips its opening and starts settled, and the map pin appears in place without its flight. The panorama's title is a heading; its screens and cursor are decorative.
+Every item is a real `<button>` with an accessible name; the nav marks the chosen one with `aria-current` and moves with the arrow keys. The card is a `role="button"` that Enter, Space and the arrow keys turn over; the piggy bank and the map pin's map are labelled images; the pin's address is announced as it changes and Confirm is a real button. With `prefers-reduced-motion`, the heart only changes colour, the nav only slides, the magnet stays still, the card swaps faces with a fade, with no entrance and no breathing, the piggy bank stays in place while the coins appear inside it and its eyes close, the thinking balls hold still and only breathe, the panorama skips its opening and starts settled, the map pin appears in place without its flight, and the token wheel starts formed and still. The token wheel's wheel is a `role="button"` that Enter and Space replay, its title is a heading and its round buttons are real buttons with names. The panorama's title is a heading; its screens and cursor are decorative.
 
 MIT · [Sara Lobo Library](https://saralobolibrary.com)

package/dist/cdn.js

@@ -1,4 +1,4 @@
-// the one-file build for a <script> tag: registers the nine tags and exposes the mount functions (the 3D pieces' scenes
+// the one-file build for a <script> tag: registers the ten tags and exposes the mount functions (the 3D pieces' scenes
 // are fetched from next to this file the first time one is mounted, and so are the Panorama's clip and pictures)
-import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin };
+import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };

package/dist/craft.js

@@ -1,4 +1,4 @@
-/* Sara Lobo Library · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep, panorama, map pin · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel>, <map-pin> */
+/* Sara Lobo Library · liquid glass nav bar, bursting heart, magnetic icon, iridescent card, glass piggy bank, magic sphere, sweep, panorama, map pin, token wheel · <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel>, <map-pin>, <token-wheel> */
 (() => {
   // dist/style.js
   var done = /* @__PURE__ */ new Set();
@@ -2010,10 +2010,10 @@ void main() {
     for (let i = 0; i < MAX; i++) idx.set([i * 4, i * 4 + 1, i * 4 + 2, i * 4, i * 4 + 2, i * 4 + 3], i * 6);
     gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, gl.createBuffer());
     gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, idx, gl.STATIC_DRAW);
-    [["aPos", 3, 0], ["aUv", 2, 3], ["aRect", 4, 5], ["aMisc", 4, 9], ["aPan", 2, 13], ["aLab", 2, 15], ["aGlow", 1, 17]].forEach(([name, size, off]) => {
+    [["aPos", 3, 0], ["aUv", 2, 3], ["aRect", 4, 5], ["aMisc", 4, 9], ["aPan", 2, 13], ["aLab", 2, 15], ["aGlow", 1, 17]].forEach(([name, size, off2]) => {
       const loc = gl.getAttribLocation(prog, name);
       gl.enableVertexAttribArray(loc);
-      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, F * 4, off * 4);
+      gl.vertexAttribPointer(loc, size, gl.FLOAT, false, F * 4, off2 * 4);
     });
     const U = (n2) => gl.getUniformLocation(prog, n2);
     const uHalf = U("uHalf"), uP = U("uP"), uLab = U("uLab"), uView = U("uView"), uDpr = U("uDpr"), uColor = U("uColor");
@@ -2519,6 +2519,51 @@ void main() {
     };
   }
 
+  // src/tokens-load-cdn.js
+  var me5 = typeof document !== "undefined" && document.currentScript ? document.currentScript.src : "";
+  var base4 = me5 ? me5.slice(0, me5.lastIndexOf("/") + 1) : "https://cdn.jsdelivr.net/npm/craft-library@0/dist/";
+  var loadTokens = () => import(base4 + "tokens.cdn.js");
+
+  // dist/tokens-mount.js
+  function mountTokenWheel(host, o = {}) {
+    let w = null, gone = false, wantReplay = false, wantTurn = o.turned ? true : null;
+    const opts = { labels: o.labels, frame: o.frame, controls: o.controls, autoplay: o.autoplay, fonts: o.fonts, gyroscope: o.gyroscope };
+    const cont = () => {
+      if (o.onContinue) o.onContinue();
+    };
+    host.addEventListener("tokenscontinue", cont);
+    const ready = loadTokens().then((m) => {
+      if (gone) return null;
+      w = m.mountTokens(host, opts);
+      if (wantTurn != null) w.turn(wantTurn);
+      if (wantReplay) w.replay();
+      return w.ready.then(() => w);
+    });
+    return {
+      ready,
+      replay: () => {
+        if (w) w.replay();
+        else wantReplay = true;
+      },
+      turn: (side) => {
+        if (w) return w.turn(side);
+        wantTurn = side == null ? !wantTurn : !!side;
+        return wantTurn;
+      },
+      gyroscope: () => w ? w.gyroscope() : Promise.resolve(false),
+      // call it from a tap: iOS asks the person first
+      get turned() {
+        return w ? w.turned : !!wantTurn;
+      },
+      destroy() {
+        gone = true;
+        host.removeEventListener("tokenscontinue", cont);
+        if (w) w.destroy();
+        w = null;
+      }
+    };
+  }
+
   // dist/elements.js
   function define(name, mount, options) {
     if (typeof customElements === "undefined" || customElements.get(name)) return;
@@ -2621,7 +2666,24 @@ void main() {
     autoplay: el.getAttribute("autoplay") === "false" ? false : void 0,
     fonts: el.getAttribute("fonts") === "false" ? false : void 0
   }));
+  var off = (el, name) => el.getAttribute(name) === "false" ? false : void 0;
+  define("token-wheel", (el, o) => {
+    css("craft-tokens-host", ":where(token-wheel){display:block;position:relative;width:100%;height:900px}");
+    const m = mountTokenWheel(el, o);
+    el.replay = m.replay;
+    el.turn = m.turn;
+    el.gyroscope = m.gyroscope;
+    return m;
+  }, (el) => ({
+    labels: { eyebrow: el.getAttribute("label-eyebrow") ?? void 0, title: el.getAttribute("label-title") ?? void 0, cta: el.getAttribute("label-cta") ?? void 0, initials: el.getAttribute("initials") ?? void 0 },
+    frame: off(el, "frame"),
+    controls: off(el, "controls"),
+    autoplay: off(el, "autoplay"),
+    fonts: off(el, "fonts"),
+    gyroscope: off(el, "gyroscope"),
+    turned: el.hasAttribute("turned") && el.getAttribute("turned") !== "false"
+  }));
 
   // dist/cdn.js
-  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin };
+  window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };
 })();

package/dist/elements.js

@@ -1,4 +1,4 @@
-// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel> and <map-pin>: the
+// <glass-nav>, <like-button>, <magnetic-icon>, <iridescent-card>, <piggy-bank>, <magic-sphere>, <sweep-sphere>, <panorama-reel>, <map-pin> and <token-wheel>: the
 // pieces as HTML tags, for pages without React. They render into the page itself (no shadow root), so the glass can
 // blend with what is behind it.
 import { mountLike } from './like.js';
@@ -9,6 +9,7 @@ import { mountPiggyBank } from './piggy-mount.js';
 import { mountThinking } from './thinking.js';
 import { mountPanoramaReel } from './panorama-mount.js';
 import { mountMapPin } from './pin-mount.js';
+import { mountTokenWheel } from './tokens-mount.js';
 import { css } from './style.js';
 
 function define(name, mount, options) {
@@ -117,4 +118,20 @@ define('map-pin', (el, o) => {
   fonts: el.getAttribute('fonts') === 'false' ? false : undefined
 }));
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin };
+// the token wheel fills the tag: a block, 100% wide and 900px tall unless the page sizes it. Its white pill fires
+// "tokenscontinue". The words: label-eyebrow, label-title, label-cta, initials. frame="false" fills the tag with the
+// screen (a real phone), controls="false" hides the round buttons, turned lays it on its side; from code, el.turn(true)
+// lays it down, el.turn(false) stands it up and el.replay() plays the opening again.
+const off = (el, name) => (el.getAttribute(name) === 'false' ? false : undefined);
+define('token-wheel', (el, o) => {
+  css('craft-tokens-host', ':where(token-wheel){display:block;position:relative;width:100%;height:900px}');
+  const m = mountTokenWheel(el, o);
+  el.replay = m.replay; el.turn = m.turn; el.gyroscope = m.gyroscope;
+  return m;
+}, (el) => ({
+  labels: { eyebrow: el.getAttribute('label-eyebrow') ?? undefined, title: el.getAttribute('label-title') ?? undefined, cta: el.getAttribute('label-cta') ?? undefined, initials: el.getAttribute('initials') ?? undefined },
+  frame: off(el, 'frame'), controls: off(el, 'controls'), autoplay: off(el, 'autoplay'), fonts: off(el, 'fonts'), gyroscope: off(el, 'gyroscope'),
+  turned: el.hasAttribute('turned') && el.getAttribute('turned') !== 'false'
+}));
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };

package/dist/index.js

@@ -9,6 +9,7 @@ import { mountPiggyBank } from './piggy-mount.js';
 import { mountThinking } from './thinking.js';
 import { mountPanoramaReel } from './panorama-mount.js';
 import { mountMapPin } from './pin-mount.js';
+import { mountTokenWheel } from './tokens-mount.js';
 
 const HOST = { display: 'inline-block', lineHeight: 0, verticalAlign: 'middle' };
 
@@ -118,4 +119,21 @@ export function MapPin({ height = 560, labels, label, autoplay, fonts, replay, o
   return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', height, ...style } });
 }
 
-export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin };
+// The token wheel fills the box it renders (100% wide and `height` tall, 900px by default): an account onboarding screen
+// whose silver tokens turn on a wheel. With the frame (the default) the screen sits in a phone that scales to fit the box,
+// with two round buttons beside it, turn it on its side and replay; turned lays it down from code, and the tokens fall
+// and pile up against the edge. frame={false} fills the box with the screen itself, for a real phone, where the phone's
+// own tilt moves the tokens. onContinue: the white pill. It loads its 3D scene (three.js) the first time it mounts.
+export function TokenWheel({ height = 900, labels, frame, controls, autoplay, fonts, gyroscope, turned, replay, onContinue, className, style }) {
+  const host = useRef(null), wheel = useRef(null), last = useRef(replay), cont = useLatest(onContinue);
+  const key = JSON.stringify([labels, frame, controls, autoplay, fonts, gyroscope]);
+  useEffect(() => {
+    const m = wheel.current = mountTokenWheel(host.current, { labels, frame, controls, autoplay, fonts, gyroscope, turned, onContinue: () => cont.current && cont.current() });
+    return () => { m.destroy(); wheel.current = null; };
+  }, [key]);
+  useEffect(() => { const m = wheel.current; if (m && turned != null && m.turned !== !!turned) m.turn(!!turned); }, [turned]);
+  useEffect(() => { if (last.current === replay) return; last.current = replay; if (wheel.current) wheel.current.replay(); }, [replay]);
+  return createElement('div', { ref: host, className, style: { position: 'relative', width: '100%', height, ...style } });
+}
+
+export { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel, mountMapPin, mountTokenWheel };

package/dist/panorama-assets.js

@@ -1,2 +1,2 @@
 // where the Panorama's own clip and pictures are: jsDelivr, at this version of the package
-export const ASSETS = 'https://cdn.jsdelivr.net/npm/craft-library@0.6.0/dist/panorama/';
+export const ASSETS = 'https://cdn.jsdelivr.net/npm/craft-library@0.7.0/dist/panorama/';

package/dist/tokens-load.js

@@ -0,0 +1,2 @@
+// where the token wheel comes from: for bundlers, the package's tokens.js (it imports the `three` dependency)
+export const loadTokens = () => import('./tokens.js');

package/dist/tokens-mount.js

@@ -0,0 +1,30 @@
+// Token wheel: the mount around the library's tokens.js. tokens.js, and three.js with it, loads only when a token wheel
+// is mounted, so the other pieces stay light.
+import { loadTokens } from './tokens-load.js';
+
+// host: the element the screen fills (give it a size; with the frame the phone, 390 × 844, scales to fit, and it is made
+// for a box about 900px tall). o: { labels: { eyebrow, title, cta, initials }, frame (false: the screen fills the host,
+// for a real phone), controls (false: no turn and replay buttons beside the phone), autoplay (false: the tokens wait for
+// replay()), fonts (false: don't load DM Sans), gyroscope (false: never read the phone's tilt), turned (true: lay it on
+// its side), onContinue() when the white pill is pressed }
+export function mountTokenWheel(host, o = {}) {
+  let w = null, gone = false, wantReplay = false, wantTurn = o.turned ? true : null;
+  const opts = { labels: o.labels, frame: o.frame, controls: o.controls, autoplay: o.autoplay, fonts: o.fonts, gyroscope: o.gyroscope };
+  const cont = () => { if (o.onContinue) o.onContinue(); };
+  host.addEventListener('tokenscontinue', cont);
+  const ready = loadTokens().then((m) => {
+    if (gone) return null;
+    w = m.mountTokens(host, opts);
+    if (wantTurn != null) w.turn(wantTurn);
+    if (wantReplay) w.replay();
+    return w.ready.then(() => w);
+  });
+  return {
+    ready,
+    replay: () => { if (w) w.replay(); else wantReplay = true; },
+    turn: (side) => { if (w) return w.turn(side); wantTurn = side == null ? !wantTurn : !!side; return wantTurn; },
+    gyroscope: () => (w ? w.gyroscope() : Promise.resolve(false)),   // call it from a tap: iOS asks the person first
+    get turned() { return w ? w.turned : !!wantTurn; },
+    destroy() { gone = true; host.removeEventListener('tokenscontinue', cont); if (w) w.destroy(); w = null; }
+  };
+}