craft-library 0.4.0 → 0.5.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, and the Panorama, a hero for moving pictures. 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 two of the 3D pieces, and it loads only when one of them is on the page.
 
 ```bash
 npm install craft-library
@@ -119,9 +119,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 eight tags. Same pieces, same props as attributes.
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/craft-library@0/dist/craft.js"></script>
@@ -133,12 +157,13 @@ 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 -->
 ```
 
 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 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, the thinking balls hold still and only breathe, and the panorama skips its opening and starts settled. 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 eight 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 } from './elements.js';
+window.CraftLibrary = { mountLike, mountMagnet, mountGlassNav, mountIridescentCard, mountPiggyBank, mountThinking, mountPanoramaReel };