Repository navigation
feat: added 3 interactive grid components - #50
Merged
Merged
Conversation
✅ Deploy Preview for zepaui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Component Name
Three grid-section components.
any-gridgrid-sectionscrypto-gridgrid-sectionsgirl-gridgrid-sectionsDescription
any-grid— A seven-tile bento on black where the layout never moves and everycard is alive instead. Built from a supplied reference video, read frame by frame:
a scan column sweeping a token chart with a tracker dot riding the line beneath it,
three counters easing to their figures while two more scramble and settle, cycling
tool icons and action rows, a portrait swapping with its badge, six breathing bars,
and a collaborator's cursor dragging a selection across the closing line.
The selection uses a clipped duplicate — a dark-on-light copy of the phrase wiped
over the white one via
clip-path: inset(0 var(--cut) 0 0)— so the text genuinelyinverts as the highlight passes rather than faking it with a colour crossfade.
Continuous values are written straight to refs; only four state values re-render,
on 0.9–1.8s ticks.
crypto-grid— A seven-tile payments bento on white. A purple hero over threepartner coins, a ring of app tiles sweeping the top arc of a circle whose centre
sits on the card's bottom edge, a QR plate riding 20% off the top, a report panel
whose spend bar fills on wake, a field of 286 glyphs quietly rewriting itself, and
a bell that rings.
The integration ring is three nested layers per tile — the ring turns
+360°, themiddle layer unwinds it, the inner layer unwinds the tile's seat angle — so every
logo stays bolt upright the whole way round. Geometry was derived from the reference
rather than eyeballed: apex within 3px, tile size within 1px, and the same number of
tiles visible at once.
girl-grid— A five-tile support-agent bento on soft grey, laid out wide andshallow. A portrait under a frosted band carries a conversation that arrives bubble
by bubble and restarts; the language card is a real set of switches; the conversations
counter sits under a bare
ZepaFolder; the omni-channel tile floats its channelsalong a dashed arc and its microphone records when pressed.
Two genuine controls, both real
<button>elements witharia-pressed, keyboardfocus rings and labels — not fake graphics:
the code fades, a flag fills the track and a knob springs across.
offset delays and two rings pulse outward.
Board proportions were matched to the reference by measurement (2.00:1 vs 1.96:1;
row height 0.244× the board width vs 0.243×), with type within ~2% of the reference
scale on every element.
Embed-safety across all three: no
position: fixed, nowindow.innerWidth/ innerHeight/scrollY, no@importor external font links, no globalhtml/body/*/aselectors, every class and keyframe prefixed per component (ag-,cg-,gg-). Each owns its own scroll container.Responsive: three or four tiers each (900 / 560 / 380). On phones the
vw-cappedclamps are replaced with fixed pixel sizes — those caps collapse badges, switches and
chart heights to nothing at 375px — and hover lifts are disabled, since on touch they
stick after a tap.
height: 100svhalongside100vhso the boards don't sit under acollapsing mobile URL bar.
Preview
All three recorded and compressed to
1280×~800 @ 30fps,+faststart, audio stripped.Sources were ~2400×1500 @ 120fps.
any-gridcrypto-gridgirl-grid104 MB → 1.0 MB. SSIM measured against a visually-lossless encode of each; all
above 0.99. As with previous previews, the 120fps source carried most of the weight —
the frame-rate drop did more than the CRF.
Dependencies Added
None. No new npm packages; all three ship
dependencies: [].girl-griddeclares one registry dependency — the first component in the registryto use the field:
The 300K tile embeds
ZepaFolderwithvariant="bare"(documented as "just the folder,for dropping into someone else's tile"),
lightbox={false}since a FLIP lightbox insidea 260px cell would be cramped.
sizeis a number rather than a CSS length, so it'smeasured off the card with a
ResizeObserverand bounded 74–152px.Verified
public/r/girl-grid.jsoncarries the dependency URL and bundles onlydemo.tsx, so the CLI fetcheszepa-folderseparately rather than inlining it.Checklist
meta.ts— all 3, slugs match folder namesdemo.tsx— all 3public/previews/{category}/{slug}/preview.mov) — all 3, compressednpm run build:registry—items.ts,loaders.ts,published.ts,registry.json,code-paths.tsandpublic/r/*.jsonall regeneratednpm run lint— cleannpm run test— 23 passed / 6 filesconsole.logpackage.jsonall imagery served from Cloudinary