craft-library 0.4.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +54 -5
- package/dist/card.cdn.js +1 -1
- package/dist/card.js +1 -1
- package/dist/cdn.js +4 -4
- package/dist/craft.js +810 -30
- package/dist/elements.js +39 -2
- package/dist/glassnav.js +1 -1
- package/dist/index.js +32 -1
- package/dist/like.js +2 -2
- package/dist/magnet.js +2 -2
- package/dist/panorama/poster.webp +0 -0
- package/dist/panorama/reel.mp4 +0 -0
- package/dist/panorama/t/s01.webp +0 -0
- package/dist/panorama/t/s02.webp +0 -0
- package/dist/panorama/t/s03.webp +0 -0
- package/dist/panorama/t/s05.webp +0 -0
- package/dist/panorama/t/s06.webp +0 -0
- package/dist/panorama/t/s07.webp +0 -0
- package/dist/panorama/t/s08.webp +0 -0
- package/dist/panorama/t/s09.webp +0 -0
- package/dist/panorama/t/s10.webp +0 -0
- package/dist/panorama/t/s11.webp +0 -0
- package/dist/panorama/t/s12.webp +0 -0
- package/dist/panorama/t/s13.webp +0 -0
- package/dist/panorama/t/s14.webp +0 -0
- package/dist/panorama/t/s15.webp +0 -0
- package/dist/panorama/t/s16.webp +0 -0
- package/dist/panorama-assets.js +2 -0
- package/dist/panorama-mount.js +22 -0
- package/dist/panorama.js +496 -0
- package/dist/piggy.cdn.js +1 -1
- package/dist/piggy.js +1 -1
- package/dist/pin-load.js +2 -0
- package/dist/pin-mount.js +30 -0
- package/dist/pin.cdn.js +977 -0
- package/dist/pin.js +977 -0
- package/dist/thinking.js +2 -2
- package/package.json +12 -4
package/dist/thinking.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// Magic sphere and Sweep · Craft Library, by Sara Lobo. thinking.css and thinking.js from the library, unchanged,
|
|
2
2
|
// around a mount.
|
|
3
3
|
import { css } from './style.js';
|
|
4
|
-
const CSS = "/* Thinking orbs ·
|
|
4
|
+
const CSS = "/* Thinking orbs · Sara Lobo Library\n A ball of dots and the word beside it, for the wait while an answer is being written. thinking.js draws the ball\n and, for the Sweep, carries the ball's wave on through the word. Made for dark backgrounds: on a light one, set\n --thinking-ink (the dots and the light in the word) and --thinking-dim (the word at rest). */\n\n.thinking {\n --thinking-size: 32px;\n --thinking-ink: #EDEDED;\n --thinking-dim: #8A8A8A;\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 10px;\n vertical-align: middle;\n}\n/* the ball: drawn by thinking.js at this size. Under 64px it uses more, finer dots, made to sit beside text */\n.thinking-orb {\n display: block;\n flex: none;\n width: var(--thinking-size);\n height: var(--thinking-size);\n}\n/* the word: a light passes through it, left to right, on a loop */\n.thinking-label {\n font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', system-ui, sans-serif;\n font-size: 14px;\n line-height: normal;\n letter-spacing: -.005em;\n white-space: nowrap;\n -webkit-font-smoothing: antialiased;\n text-rendering: optimizeLegibility;\n color: transparent;\n -webkit-background-clip: text;\n background-clip: text;\n background-image: linear-gradient(90deg, var(--thinking-dim) 0 35%, var(--thinking-ink) 50%, var(--thinking-dim) 65% 100%);\n background-size: 250% 100%;\n animation: thinking-shine 2.6s linear infinite;\n}\n@keyframes thinking-shine {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: 0 0;\n }\n}\n/* the Sweep's word is lit by the ball's own wave: thinking.js moves --thinking-x across it */\n.thinking[data-kind=\"sweep\"] .thinking-label {\n --thinking-x: -999px;\n background-image: linear-gradient(90deg, var(--thinking-dim) calc(var(--thinking-x) - 26px), var(--thinking-ink) var(--thinking-x), var(--thinking-dim) calc(var(--thinking-x) + 26px));\n background-size: auto;\n animation: none;\n}\n\n/* less motion: the ball holds still and only breathes; the word stays plain */\n@media (prefers-reduced-motion: reduce) {\n .thinking-label {\n animation: none;\n background: none;\n color: var(--thinking-dim);\n }\n}\n";
|
|
5
5
|
let api;
|
|
6
6
|
function engine() {
|
|
7
7
|
if (api) return api;
|
|
8
8
|
const window = {};
|
|
9
|
-
// Thinking orbs ·
|
|
9
|
+
// Thinking orbs · Sara Lobo Library
|
|
10
10
|
// Two "thinking" indicators made of dots on a canvas, for the wait while an answer is being written:
|
|
11
11
|
// sphere · Magic sphere: a Rubik's cube on a ball, one grey tone per face. Its slices turn to scramble the pieces,
|
|
12
12
|
// then retrace their steps until every piece is home, and the ball lights up for a moment.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "craft-library",
|
|
3
|
-
"version": "0.
|
|
4
|
-
"description": "
|
|
3
|
+
"version": "0.6.0",
|
|
4
|
+
"description": "Sara Lobo Library: a liquid glass nav bar, a bursting heart, a magnetic icon, an iridescent 3D card, a glass piggy bank, two thinking indicators (Magic sphere, Sweep), the Panorama hero and the Map pin address picker, for React or plain HTML",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
7
7
|
"module": "./dist/index.js",
|
|
@@ -51,11 +51,19 @@
|
|
|
51
51
|
"thinking-indicator",
|
|
52
52
|
"loader",
|
|
53
53
|
"ai",
|
|
54
|
-
"particles"
|
|
54
|
+
"particles",
|
|
55
|
+
"hero",
|
|
56
|
+
"webgl",
|
|
57
|
+
"video",
|
|
58
|
+
"film",
|
|
59
|
+
"landing-page",
|
|
60
|
+
"map",
|
|
61
|
+
"address",
|
|
62
|
+
"map-pin"
|
|
55
63
|
],
|
|
56
64
|
"author": "Sara Lobo",
|
|
57
65
|
"license": "MIT",
|
|
58
|
-
"homepage": "https://
|
|
66
|
+
"homepage": "https://saralobolibrary.com",
|
|
59
67
|
"dependencies": {
|
|
60
68
|
"three": "0.169.0"
|
|
61
69
|
}
|