@@ -312,12 +330,19 @@ createQuickdraw({
const container = document.getElementById('hero-board')
if (container) {
- const board = createQuickdraw({ container, theme: 'light', grid: 'dots' })
+ const board = createQuickdraw({ container, theme: 'light', grid: 'lines' })
const { store } = board.editor
const saved = sessionStorage.getItem('qd-hero')
if (saved) {
try { store.loadSnapshot(JSON.parse(saved), 'remote') } catch {}
}
+ // "draw something" nudge: only over an untouched board, gone at first touch
+ const hint = document.getElementById('hero-hint')
+ if (hint) {
+ const hide = () => hint.classList.add('off')
+ if (store.shapes().length > 0) hide()
+ else container.addEventListener('pointerdown', hide, { once: true })
+ }
let t
store.listen(() => {
clearTimeout(t)
@@ -413,6 +438,67 @@ createQuickdraw({
box-shadow: 0 24px 60px -28px rgba(28, 27, 24, 0.28);
overflow: hidden; background: #fff;
}
+ #hero-hint {
+ position: absolute; inset: 0; z-index: 5;
+ display: flex; align-items: center; justify-content: center;
+ pointer-events: none;
+ }
+ #hero-hint.off { display: none; }
+ .hint-stage {
+ position: relative;
+ display: flex; flex-direction: column; align-items: center; gap: 2px;
+ }
+ /* the wrap is exactly the SVG's box, so the hand's offset-path (element
+ coordinates) and the squiggle (SVG viewBox) share one origin */
+ .hint-doodle-wrap { position: relative; width: 220px; height: 90px; }
+ .hint-doodle { overflow: visible; display: block; }
+ .hint-squiggle {
+ stroke-dasharray: 1;
+ stroke-dashoffset: 1;
+ animation: hint-draw 3.2s ease-in-out infinite;
+ }
+ .hint-hand {
+ position: absolute; top: 0; left: 0;
+ /* same curve as .hint-squiggle, so the pencil tip rides the line */
+ offset-path: path('M18 62 C 40 18, 62 18, 78 50 C 92 78, 110 78, 124 50 C 138 22, 158 22, 172 44 C 182 60, 194 62, 204 52');
+ offset-rotate: 0deg;
+ /* offset-path anchors the glyph CENTER to the curve (Chrome has no
+ offset-anchor), so shift the box until the pencil tip — bottom-left
+ of the glyph — is what touches the line */
+ transform: translate(14px, -14px);
+ animation: hint-trace 3.2s ease-in-out infinite;
+ filter: drop-shadow(0 3px 4px rgba(28, 27, 24, 0.25));
+ }
+ @supports not (offset-path: path('M0 0 L1 1')) {
+ .hint-hand { display: none; }
+ }
+ .hint-pill {
+ display: inline-flex; align-items: center; gap: 8px;
+ padding: 9px 16px; border-radius: 999px;
+ background: rgba(255, 255, 255, 0.9);
+ border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
+ box-shadow: 0 10px 26px -14px rgba(28, 27, 24, 0.35);
+ backdrop-filter: blur(4px);
+ color: var(--ink); font-weight: 600; font-size: 14.5px;
+ }
+ /* line and pen share the same fade window (74–90%) so they vanish together */
+ @keyframes hint-draw {
+ 0% { stroke-dashoffset: 1; opacity: 1; }
+ 62% { stroke-dashoffset: 0; opacity: 1; }
+ 74% { stroke-dashoffset: 0; opacity: 1; }
+ 90%, 100% { stroke-dashoffset: 0; opacity: 0; }
+ }
+ @keyframes hint-trace {
+ 0% { offset-distance: 0%; opacity: 0; }
+ 6% { opacity: 1; }
+ 62% { offset-distance: 100%; opacity: 1; }
+ 74% { offset-distance: 100%; opacity: 1; }
+ 90%, 100% { offset-distance: 100%; opacity: 0; }
+ }
+ @media (prefers-reduced-motion: reduce) {
+ .hint-squiggle { animation: none; stroke-dashoffset: 0; }
+ .hint-hand { animation: none; offset-distance: 100%; }
+ }
.features .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; }
.card {
diff --git a/docs/star-history-dark.svg b/docs/star-history-dark.svg
index 716ce1a..7b9a088 100644
--- a/docs/star-history-dark.svg
+++ b/docs/star-history-dark.svg
@@ -1,5 +1,5 @@
-