craft-library 0.4.0 → 0.6.0

package/README.md

@@ -1,6 +1,6 @@
-# Craft Library
+# 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, and two "thinking" indicators, the Magic sphere and the Sweep. 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 the two 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, 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.
 
 ```bash
 npm install craft-library
@@ -101,6 +101,29 @@ import { PiggyBank } 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 is made for a dark background; black is best.
 
+## Map pin
+
+A 3D address picker: a hollow frosted-glass map pin over a dark city map in perspective. A click or a tap on a street sends the pin flying on springs to the nearest curb: it lifts, its head leans with the acceleration, it rises a touch to aim, falls under gravity and sticks its tip in, the glass vibrating about it. The map is sharp where it lands and soft further away, the streets carry their names, and a card along the bottom shows the address, with the number on the right side of the street, to confirm. With a mouse, hovering shows the address a click would give. The city and its names are invented, to show the gesture.
+
+```jsx
+import { MapPin } from 'craft-library';
+
+<MapPin height={560} onConfirm={(a) => saveAddress(a)} />   // saveAddress: your own handler
+```
+
+| Prop | | |
+|---|---|---|
+| `height` | `number \| string` | The box it fills: 100% wide and this tall. Default `560`. |
+| `onChange` | `(address) => void` | Each address the pin is sent to: `{ address, neighbourhood, place }`. |
+| `onConfirm` | `(address) => void` | When Confirm is pressed, with the same address. |
+| `labels` | `{ title, confirm, confirmed }` | The card's words. Defaults `"Delivery address"`, `"Confirm"`, `"Confirmed"`. |
+| `replay` | `any` | Change it (a counter, say) to fly the pin off and back in. |
+| `autoplay` | `boolean` | `false` keeps the pin out until `replay` changes. Default `true`. |
+| `fonts` | `boolean` | `false` doesn't load DM Sans from Google Fonts. Default `true`. |
+| `label` | `string` | The map's accessible name. |
+
+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.
+
 ## 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.
@@ -119,9 +142,33 @@ import { MagicSphere, SweepSphere } from 'craft-library';
 
 Both are made for a dark background: the dots and the word are light. On a light one, set `--thinking-ink` (the dots and the light in the word) and `--thinking-dim` (the word at rest) on it or a parent. The element is a `role="status"`.
 
+## Panorama
+
+A hero for people who work with moving pictures. A clip opens full-bleed under letterbox bars while the title tracks in, its letters closing up from a wide spacing and out of a blur, centre first; then the clip shrinks into one screen of a panorama of monitors around you, and the other screens arrive in a wave from it. The pointer turns your head. The screens are black and white: colour lives only in a soft circle around the pointer, and the screen under it lights the dark with its own colours while focus brackets lock on and name it.
+
+```jsx
+import { PanoramaReel } from 'craft-library';
+
+<PanoramaReel height="100vh" title="Northlight" text="Films for the" textItalic="long evening." />
+```
+
+| Prop | | |
+|---|---|---|
+| `height` | `number \| string` | The box it fills: 100% wide and this tall. Default `640`. |
+| `title`, `text`, `textItalic` | `string` | The title, and the line under it (`textItalic` follows `text` in the display face). Defaults: "Lorem ipsum", "Dolor sit amet," "consectetur adipiscing." |
+| `video` | `{ src, poster, title, year }` | The opening clip, which then becomes the screen in the middle. |
+| `stills` | `{ src, title, year }[]` | Up to 16 pictures for the other screens, cropped to 16:10. With neither `video` nor `stills`, it shows the library's own clip and 15 stills (served from jsDelivr). |
+| `labels` | `boolean` | "CAM 07" on each screen. Default `true`. |
+| `intro` | `boolean` | `false` starts it settled, without the opening. Default `true`. |
+| `cursor` | `boolean` | The dot-and-ring pointer, for a mouse or trackpad. Default `true`. |
+| `fonts` | `boolean` | `false` doesn't load Cormorant Garamond, Geist and Geist Mono from Google Fonts. Default `true`. |
+| `replay` | `any` | Change it (a counter, say) to play the opening again. |
+
+It is WebGL with no dependencies, so one per screen is best. Your clip and pictures must come from your own site or one that allows CORS. The opening plays the first time it comes into view; without WebGL it shows the poster and the title, still.
+
 ## Plain HTML
 
-One script registers seven tags. Same pieces, same props as attributes.
+One script registers nine tags. Same pieces, same props as attributes.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
@@ -133,12 +180,14 @@ One script registers seven tags. Same pieces, same props as attributes.
 <piggy-bank></piggy-bank>                 <!-- "piggydone" event after each play; el.play() replays; 100% wide, 560px tall unless you size it -->
 <magic-sphere></magic-sphere>             <!-- label="Thinking" (default; label="" for the ball alone), size="32" -->
 <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 -->
 ```
 
 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 is a labelled image. 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, and the thinking balls hold still and only breathe.
+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.
 
-MIT · [Craft Library](https://claude.ai/artifact/LBBWCfEHJGvfBSynV3wDuR)
+MIT · [Sara Lobo Library](https://saralobolibrary.com)

package/dist/card.cdn.js

@@ -1,4 +1,4 @@
-// Iridescent card · Craft Library, by Sara Lobo
+// Iridescent card · Sara Lobo Library
 // A metal credit card in 3D: brushed iridescent plate, a fine struck frame along the edge, a chip and the Visa mark.
 // It arrives with a slow half turn, from its back to its face, and a tap turns it over to show the numbers.
 //

package/dist/card.js

@@ -1,4 +1,4 @@
-// Iridescent card · Craft Library, by Sara Lobo
+// Iridescent card · Sara Lobo Library
 // A metal credit card in 3D: brushed iridescent plate, a fine struck frame along the edge, a chip and the Visa mark.
 // It arrives with a slow half turn, from its back to its face, and a tap turns it over to show the numbers.
 //

package/dist/cdn.js

@@ -1,4 +1,4 @@
-// the one-file build for a <script> tag: registers the seven tags and exposes the mount functions (the 3D pieces' scenes
-// are fetched from next to this file the first time one is mounted)
-import { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking } from './elements.js';
-window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking };
+// the one-file build for a <script> tag: registers the nine 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 };