feat(registry): add five vertical ad-template blocks and their motion primitives (#3217)

* feat(registry): add the notification-cascade block and banner-push-in component

A vertical ad-template block: phone notifications land one after another on a
2.000s beat and stack up the screen, each banner pushing the pile down as it
arrives, before the whole stack lifts away into a closing card carrying the
HyperFrames lockup. Every decisive number - the 214px pitch, the 22px entry
rise, the expo.out restack - is measured from reference footage rather than
invented. The backdrop plate is a generated photograph, shipped with the item.

The banner-push-in component carries the reusable arrival move on its own:
one banner fades in and rises into place while everything already on screen
slides up one pitch in lockstep.

Both pass the full browser gate (runtime, layout, motion, WCAG AA contrast)
installed into a scratch project from a served registry.

* feat(registry): add the share-sheet-carousel block and sheet-spring-up component

A share sheet springs up from the bottom of the phone and cycles photographic
previews inside its card on a fast cut rhythm - fourteen cuts over 7.2s -
while the blurred ground swaps behind it on the same beats, ending on an
accept tap. A brand strip with the HyperFrames lockup rides the bottom of the
preview, as the reference's did. The four stills are generated photographs,
shipped with the item.

The sheet-spring-up component carries the arrival on its own: a real spring
sampled frame by frame from reference footage - up from below, 192px
overshoot, 0.72s settle - shipped as the sampled table rather than an ease
that approximates it.

Both pass the full browser gate (WCAG AA) installed from a served registry.

* feat(registry): add the typing-indicator and streaming-text components

Two chat primitives extracted from reference footage of real conversations.

typing-indicator is the three-dot bubble that says someone is writing: it
pops in at the thread's edge on the measured entry (scale 0.6 to 1, alpha
0.4 to 1, 0.10s power2.out), holds, and vanishes when the message lands. An
optional bounded dot wave is included for compositions that want the dots to
breathe.

streaming-text is not a typewriter: words arrive in the uneven bursts of a
streamed AI answer, on a token rhythm measured word-by-word from the
reference, each word landing grey and inking to full colour over 0.27s. The
GAPS table ships in the integration note and cycles for any word count.

Both demos pass the browser gate.

* feat(registry): add the ai-chat-reveal block

A question is typed on a rising keyboard - measured keystroke rhythm, steady
caret - sent, and answered by an AI that streams its reply word by word:
thinking dot on the measured alpha ramp, tokens arriving in uneven bursts,
a bulleted list, then a cut to a branded closing card.

The typing and streaming schedules are generated at load from the measured
gap tables, so every piece of copy is a variable - question, three answer
paragraphs, three bullets, and the whole closing card - while the rhythm
stays the reference's. Kept at the native 750x1624 capture size so the
measured keyboard geometry stays pixel-true.

Passes the full browser gate (145/145 WCAG AA) installed from a served
registry.

* feat(registry): add the message-thread-reveal block

A full text conversation plays out on a phone: bubbles popping in on their
measured entries, typing indicators holding the beat, a shared link card,
an emoji burst, delivered receipts, the composer typing five messages
keystroke by keystroke - and the whole thread scrolling up beat by beat on
the measured y-choreography until a warm closing card lands.

Every message swap keeps the measured keystroke tables intact: the new copy
is length-matched character for character to the reference's typed lines, so
all 97 typed frames land on their original beats. The footage plate is
replaced by a CSS room-and-phone-body, the link card carries a generated
still, and the closing card is rebuilt around the HyperFrames lockup with
its stars, proof line, and feature icons preserved.

Relates to the thread-message-stack work in #3046: that PR ships a
caller-payload message-stack component; this block is the complete
ad-template film around the same subject. Kept as its own commit so either
can move independently.

Passes the full browser gate (65/65 WCAG AA) installed from a served
registry.

* feat(registry): add the notes-reveal block and line-reveal-list component

A personal note is typed character by character in a notes app - the caret
riding every letter on the measured keystroke frames, the page scrolling up
on the measured settle curves as each line lands - then cuts to a paper card
with a marker headline, a circled word, a ticked checklist, and the video
card. New copy is length-matched line by line to the measured reveal table,
so all 176 keystrokes land on their original frames. The two hand-drawn
faces (Permanent Marker, Courier Prime - both OFL) ship with the item; the
reference's proprietary UI face is replaced by the system stack.

The line-reveal-list component carries the paragraph rhythm on its own:
lines land on the measured writing cadence that slows as the thought gets
heavier - 2.20s, 2.03s, 2.97s, 3.10s, 3.33s, 3.63s - and the page makes room
with the measured scroll-settle table instead of a linear glide.

Both pass the browser gate (366/366 WCAG AA for the block) installed from a
served registry.

* docs(catalog): publish the ten new ad-template items

Regenerated pages, payloads, navigation and the flat index for the five
blocks and five components added in the preceding commits. Every existing
page is untouched: the diff is ten new item pages, their payload assets, and
the two regenerated indexes.

* chore(registry): rebuild the on-device search index for the new items

* style(registry): run oxfmt over the new item sources

The repo-wide format gate covers registry HTML; the staged-file hook did
not reach these. Payloads and pages regenerated to match.

* feat(registry): restage the five component demos as device specimens

The first demos dropped each primitive onto a bare canvas, which stripped
the context the moves were measured in - a dark bubble on a black frame, a
sheet floating in empty gradient. Each demo now plays inside a phone on a
studio ground, in the move's native habitat - lock screen, chat thread,
share sheet, assistant answer, notes page - with a specimen caption naming
the component and its measured numbers. Interiors are authored at 1080x1920
and scaled into the screen, so they reuse the blocks' gate-proven geometry.
Timelines are unchanged. All five pass the browser gate.

* refactor(registry): shelve the five ad-template films as showcases

The video-primitive tag pins an item to the Motion Primitives shelf and
overrides every other grouping rule - right for an atomic move, wrong for a
25-second film. The five ad-template blocks move to the Showcases shelf
(Scenes & demos), where complete scenes live; the primitives shelf keeps
only the moves.

* refactor(registry): retire banner-push-in and line-reveal-list

Reviewed against the shelf they would join and cut as duplicates.
banner-push-in was the thinnest cut against the existing notification
family - notification-stack already owns the arrival-plus-lockstep-shift
move, mirrored. line-reveal-list was pinched from both sides: the existing
line-by-line-slide owns generic staggered lines, and the incoming
notes-typing scene carries the measured writing cadence and scroll-settle
at scene level. Their measured tables live on inside the films they were
extracted from.

* feat(registry): add four scene primitives - the moments, mountable

social-proof-card: the app-store close as one scene - wordmark, five stars,
proof line, three feature icons, CTA capsule - in a quiet stagger. Composes
with, not against, star-rating-fill / testimonial-proof-card / cta-lockup,
which stay the atomic owners of their moves.

marker-checklist-card: a hand-lettered paper card - marker headline, an
ellipse that draws itself around one word, checklist rows whose checks draw
on. The paper-and-marker sibling of mk-specs-list.

chat-thread: a conversation as a scene - measured bubble pop-ins, expo
lockstep shifts, typing dots holding the beat, a media placeholder. Message
content is one variable: heights are measured at mount and the choreography
is generated to fit. Relates to #3046's caller-payload stack; kept
independent.

notes-typing: the notes-app confession - lines typed on the measured human
keystroke rhythm, the caret riding every landed character. The scene
counterpart to typed-prompt's bare prompt line.

All four follow notification-stack's mountable-scene pattern: container
units, theme-contract tokens, one paused timeline registered under the
literal id. All demos pass the browser gate.

* docs(catalog): regenerate for the reshelved films and scene primitives

Ten pages become twelve: the five films move to the Showcases shelf, the
two retired components' pages are gone, and the four scene primitives get
pages under Motion Scenes. Every untouched page is byte-identical.

* feat(registry): bring chat-thread to film fidelity, with a per-message type switch

The scene now carries everything the reference conversation carries: status
bar, back badge, avatar and name pill, bubbles with real iMessage tails, a
Delivered receipt under the last sent bubble, large emoji rows, a media
placeholder, and a link card with title, domain and chevron.

Every message picks its type by prefix, the way marker-highlight picks a
style: recv:/sent: text bubbles, emoji: a large row, img a media
placeholder, card:Title~domain a link card. Heights are still measured at
mount and the choreography generated, so any mix of types fits.

* feat(registry): add chat-message - the atom, with its type as an enum

ONE message arrives on the measured entry, growing from its sender's
corner. The type is a proper enum - Received, Sent, Emoji, Image, Link
card - switched on the catalog page the way marker-highlight switches its
style, with the bubble tail and the Delivered receipt as their own
switches. chat-thread remains the conversation-as-scene built from
arrivals like this one; the pipe grammar belongs at that level, the enum
belongs here. Demo cycles all five types, one at a time, with a type chip
naming each.

* fix(registry): neutral composer placeholder, gsap 3.14.2 pin, exact font licences

Review fixes for #3217:
- Rendered composer placeholder "iMessage" -> "Message" in chat-thread,
  its demo, and message-thread-reveal (technique comments stay as provenance)
- notes-reveal now loads gsap@3.14.2 like every other item
- Licence wording names each face: Courier Prime OFL 1.1,
  Permanent Marker Apache-2.0 (verified against embedded name-table records)

Mirrored catalog payloads and pages regenerated for the four touched items.
This commit is contained in:
WaterrrForever
2026-08-11 16:03:42 -04:00
committed by GitHub
parent d3a4e90370
commit 4347af3fe1
105 changed files with 28255 additions and 3 deletions
@@ -0,0 +1,31 @@
<svg width="263" height="79" viewBox="0 0 263 79" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z" fill="black"/>
<path d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z" fill="black"/>
<path d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z" fill="black"/>
<path d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z" fill="black"/>
<path d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z" fill="black"/>
<path d="M82.9688 20.4238H87.8488V22.4138C88.7588 20.9638 90.3488 20.1038 92.3288 20.1038C95.4988 20.1038 97.3988 22.3338 97.3988 25.8138V35.4438H92.5188V26.8638C92.5188 25.0438 91.8188 24.1838 90.4788 24.1838C88.9488 24.1838 87.8488 25.3638 87.8488 27.2638V35.4438H82.9688V20.4238Z" fill="black"/>
<path d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z" fill="url(#paint0_linear_2204_3045)"/>
<path d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z" fill="url(#paint1_linear_2204_3045)"/>
<path d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z" fill="black"/>
<path d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z" fill="black"/>
<path d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z" fill="black"/>
<path d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z" fill="black"/>
<path d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z" fill="black"/>
<path d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z" fill="black"/>
<path d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z" fill="black"/>
<path d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z" fill="black"/>
<path d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z" fill="black"/>
<path d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z" fill="black"/>
<path d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z" fill="black"/>
<defs>
<linearGradient id="paint0_linear_2204_3045" x1="225.869" y1="-3.06048e-05" x2="222.845" y2="37.4821" gradientUnits="userSpaceOnUse">
<stop stop-color="#06E3FA"/>
<stop offset="1" stop-color="#4FDB5E"/>
</linearGradient>
<linearGradient id="paint1_linear_2204_3045" x1="230.87" y1="39" x2="244.661" y2="6.30303" gradientUnits="userSpaceOnUse">
<stop stop-color="#06E3FA"/>
<stop offset="1" stop-color="#4FDB5E"/>
</linearGradient>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 7.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 58 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB