@aznabee/freehand-ui 0.1.4 → 0.1.6
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 +117 -9
- package/dist/freehand-ui.cjs +564 -98
- package/dist/freehand-ui.js +564 -98
- package/dist/index.d.ts +61 -6
- package/dist/react.cjs +569 -99
- package/dist/react.d.ts +2 -0
- package/dist/react.js +569 -99
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -10,13 +10,14 @@ Wrap any existing web element with a beautiful, responsive, hand-drawn doodle la
|
|
|
10
10
|
|
|
11
11
|
**Good for:** call-to-action buttons, feature cards, onboarding hints, playful marketing UI.
|
|
12
12
|
|
|
13
|
-
| Feature | One-liner
|
|
14
|
-
| --------------- |
|
|
15
|
-
| **Border** | Hand-drawn frame that follows the element's shape and border-radius
|
|
16
|
-
| **Notes** | Caveat handwriting beside the element
|
|
17
|
-
| **Arrows** | Curved, straight, dotted, or looped pointers
|
|
18
|
-
| **Decorations** | Corner accents, stars, hearts, and more
|
|
19
|
-
| **
|
|
13
|
+
| Feature | One-liner |
|
|
14
|
+
| --------------- | -------------------------------------------------------------------- |
|
|
15
|
+
| **Border** | Hand-drawn frame that follows the element's shape and border-radius |
|
|
16
|
+
| **Notes** | Caveat handwriting beside the element |
|
|
17
|
+
| **Arrows** | Curved, straight, dotted, or looped pointers that draw themselves in |
|
|
18
|
+
| **Decorations** | Corner accents, stars, hearts, and more |
|
|
19
|
+
| **Localised** | Notes in the visitor's own language, right-to-left included |
|
|
20
|
+
| **Responsive** | Stays aligned on resize, scroll, and reflow |
|
|
20
21
|
|
|
21
22
|
**Live on [Aznabee.com](https://aznabee.com)** - see it in production on the real product.
|
|
22
23
|
|
|
@@ -62,6 +63,7 @@ doodle(".card", {
|
|
|
62
63
|
addBreaks: false, // lift the pen at random points around the outline
|
|
63
64
|
fontFamily: null, // override the handwriting stack
|
|
64
65
|
autoLoadFont: true,
|
|
66
|
+
locale: null, // language for a multilingual note; defaults to the visitor's
|
|
65
67
|
});
|
|
66
68
|
```
|
|
67
69
|
|
|
@@ -119,6 +121,54 @@ doodle(".cta", {
|
|
|
119
121
|
|
|
120
122
|
Notes are measured from real glyph metrics and laid out so they never sit on top of the element. The underline is drawn to the measured text width; set `underline: false` for plain handwriting.
|
|
121
123
|
|
|
124
|
+
### Notes in the visitor's language
|
|
125
|
+
|
|
126
|
+
Write the note once per language and it is drawn in the one the visitor reads - taken from `navigator.languages`, which is what their operating system is set to. No configuration, no i18n library.
|
|
127
|
+
|
|
128
|
+
```javascript
|
|
129
|
+
doodle(".cta", {
|
|
130
|
+
note: {
|
|
131
|
+
en: "start chat",
|
|
132
|
+
"pt-BR": "iniciar conversa",
|
|
133
|
+
hi: "चैट शुरू करें",
|
|
134
|
+
ar: "ابدأ الدردشة",
|
|
135
|
+
default: "start chat", // for languages you have not covered
|
|
136
|
+
},
|
|
137
|
+
});
|
|
138
|
+
|
|
139
|
+
// with the rest of the note's options
|
|
140
|
+
doodle(".cta", {
|
|
141
|
+
note: {
|
|
142
|
+
text: { en: "try me", fr: "essaie-moi" },
|
|
143
|
+
position: "bottom-right",
|
|
144
|
+
},
|
|
145
|
+
});
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
Keys are BCP-47 tags. Matching follows what the visitor asked for, most wanted language first:
|
|
149
|
+
|
|
150
|
+
- **Exact tag** - `pt-BR` for a `pt-BR` reader.
|
|
151
|
+
- **Less specific** - `zh-Hant-TW` takes `zh-Hant` over a bare `zh`, so the script is only given up after the region.
|
|
152
|
+
- **A sibling of the same language** - `en-AU` reads `en-GB` rather than dropping to another language.
|
|
153
|
+
- **`default`**, or failing that the first translation written.
|
|
154
|
+
|
|
155
|
+
Each wanted language is exhausted before the next is tried, so a `fr, en` visitor gets any French on offer ahead of the English original. The page's own `<html lang>` is consulted last, behind the visitor's list.
|
|
156
|
+
|
|
157
|
+
Take over from the browser - to follow your app's own i18n state - with `locale`:
|
|
158
|
+
|
|
159
|
+
```javascript
|
|
160
|
+
doodle(".cta", {
|
|
161
|
+
note: { en: "start chat", fr: "démarrer le chat" },
|
|
162
|
+
locale: i18n.language, // or a list, in preference order
|
|
163
|
+
});
|
|
164
|
+
```
|
|
165
|
+
|
|
166
|
+
Notes are redrawn when the browser fires `languagechange`, so switching language mid-session updates them without a reload.
|
|
167
|
+
|
|
168
|
+
**Right-to-left** notes need no flag. The base direction is read off the text itself, by its first strong character - the rule behind `dir="auto"` - so an Arabic or Hebrew note is laid out and underlined right-to-left whether it came from a locale map or a plain string.
|
|
169
|
+
|
|
170
|
+
Caveat itself only ships Latin and Cyrillic. Devanagari, Arabic, CJK and the rest fall through to the system handwriting stack and, past that, to whatever the browser picks - so those notes are legible but not handwritten. Point `fontFamily` at a face that covers your script to keep the handwriting.
|
|
171
|
+
|
|
122
172
|
### Placement behavior
|
|
123
173
|
|
|
124
174
|
- **The side you ask for is the side you get.** When a note runs past the viewport edge it slides horizontally by exactly the amount it overhangs, so a narrowing viewport walks it gradually inward instead of snapping to the opposite side.
|
|
@@ -151,7 +201,9 @@ doodle(".cta", {
|
|
|
151
201
|
|
|
152
202
|
|
|
153
203
|
|
|
154
|
-
**Styles:** `curved` (default), `straight`, `dotted`, `looped` - `looped`
|
|
204
|
+
**Styles:** `curved` (default), `straight`, `dotted`, `looped` - `looped` ties a curl into the sweep, crossing the shaft once on the inside of its bow.
|
|
205
|
+
|
|
206
|
+
Every arc sweeps _over_ the straight line and drops onto its target, the way a hand draws one. With nothing to steer around, that side is fixed rather than picked at random, so a redraw never mirrors the gesture.
|
|
155
207
|
|
|
156
208
|
**`from`** decides where the arrow leaves:
|
|
157
209
|
|
|
@@ -168,6 +220,43 @@ doodle(".cta", {
|
|
|
168
220
|
|
|
169
221
|
**`to`:** `"edge"` (default) lands the tip just outside the frame; `"center"` points into the element.
|
|
170
222
|
|
|
223
|
+
### Arrow animation
|
|
224
|
+
|
|
225
|
+
Arrows animate by default. Two gestures, both pure CSS:
|
|
226
|
+
|
|
227
|
+
- **draw** - the shaft is revealed by winding its dash offset down to zero, so the pen appears to travel from the note to the tip. The arrowhead flicks in as the pen arrives.
|
|
228
|
+
- **drift** - the whole arrow leans a few pixels along its own line of travel, toward what it points at.
|
|
229
|
+
|
|
230
|
+
```javascript
|
|
231
|
+
doodle(".cta", { arrow: { style: "looped" } }); // both, at defaults
|
|
232
|
+
|
|
233
|
+
doodle(".cta", { arrow: { animate: false } }); // draw it static
|
|
234
|
+
|
|
235
|
+
doodle(".cta", {
|
|
236
|
+
arrow: {
|
|
237
|
+
animate: {
|
|
238
|
+
draw: true, // dash sweep along the shaft
|
|
239
|
+
drift: true, // lean toward the target
|
|
240
|
+
speed: 1, // multiplier over every duration - 2 is twice as fast
|
|
241
|
+
duration: 900, // shaft draw, ms, before `speed`
|
|
242
|
+
delay: 150, // wait before the first stroke appears, ms
|
|
243
|
+
distance: 5, // how far the lean travels, px
|
|
244
|
+
driftDuration: 2200, // one full lean-and-return, ms
|
|
245
|
+
repeat: true, // false leans in once and stays there
|
|
246
|
+
},
|
|
247
|
+
},
|
|
248
|
+
});
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
`speed` scales every phase at once, so the whole gesture keeps its shape - use it in preference to setting durations individually.
|
|
252
|
+
|
|
253
|
+
A `dotted` arrow spends its dash pattern on the dots, and one pattern cannot both space them and hide the undrawn tail, so its dots flow toward the tip instead of the shaft being drawn on.
|
|
254
|
+
|
|
255
|
+
Notes:
|
|
256
|
+
|
|
257
|
+
- **`prefers-reduced-motion: reduce` turns both gestures off** and leaves the arrow fully drawn.
|
|
258
|
+
- The overlay is rebuilt on every scroll and resize. Animations are placed by how long the overlay has been on the page rather than restarted, so scrolling never replays a draw or jolts a lean mid-cycle.
|
|
259
|
+
|
|
171
260
|
### Decorations
|
|
172
261
|
|
|
173
262
|
```javascript
|
|
@@ -200,7 +289,7 @@ Corner marks follow the _rounded_ corner rather than the bounding box. Marks too
|
|
|
200
289
|
|
|
201
290
|
Chips and icon buttons get a mirrored pair of two-stroke `emphasis` marks - one either side - instead of corner marks. This is automatic when the element is under 48px on its short side or under 130px wide. `style: "sides"` forces it at any size; `style: "corners"` opts out.
|
|
202
291
|
|
|
203
|
-
Other types - `star`, `
|
|
292
|
+
Other types - `star`, `glimmer`, `smiley` - fill a corner slot when no accent or star was requested.
|
|
204
293
|
|
|
205
294
|
### Child selector mode
|
|
206
295
|
|
|
@@ -312,6 +401,25 @@ const caveat = Caveat({ subsets: ["latin"], variable: "--font-caveat" });
|
|
|
312
401
|
</Doodle>;
|
|
313
402
|
```
|
|
314
403
|
|
|
404
|
+
### Localised notes
|
|
405
|
+
|
|
406
|
+
Same as the core - a map of languages goes straight in as the note, and `locale` hands the choice to your own i18n state:
|
|
407
|
+
|
|
408
|
+
```jsx
|
|
409
|
+
<Doodle note={{ en: "start chat", fr: "démarrer le chat" }}>
|
|
410
|
+
<Button />
|
|
411
|
+
</Doodle>;
|
|
412
|
+
|
|
413
|
+
<Doodle
|
|
414
|
+
note={{ en: "start chat", fr: "démarrer le chat" }}
|
|
415
|
+
locale={i18n.language}
|
|
416
|
+
>
|
|
417
|
+
<Button />
|
|
418
|
+
</Doodle>;
|
|
419
|
+
```
|
|
420
|
+
|
|
421
|
+
Server-rendered markup is unaffected: the overlay is drawn in an effect, so the language is read on the client and there is nothing to mismatch on hydration.
|
|
422
|
+
|
|
315
423
|
### React notes
|
|
316
424
|
|
|
317
425
|
- Inline object props (`note={{ text: "hi" }}`) are compared by value, so a re-render does not tear down and redraw the overlay with a new random seed.
|