feat(registry): 249 seamless image-loop blocks (95 motion families, 1:1) - #3810
Draft
WaterrrForever wants to merge 1 commit into
Draft
feat(registry): 249 seamless image-loop blocks (95 motion families, 1:1)#3810WaterrrForever wants to merge 1 commit into
WaterrrForever wants to merge 1 commit into
Conversation
…s, 1:1) One block per loop variant (loop-<family>[-<n>], 1080x1080), one hand-written engine per family, driven by a single paused GSAP timeline that recomputes every card transform from t. Every engine parameter is exposed through data-composition-variables, grouped like a template editor's panel (Media / Background / Appearance / Animation / Template options), plus image1..N content slots that default to monochrome SVG placeholders. No third-party media ships. Validation: scripts/lint-registry-items.mjs 249/249, oxfmt clean, hyperframes check on one variant per family (95/95), registry.json + docs/catalog pages regenerated by the repo scripts. Previews are rendered locally (720^2) and need the docs-images upload. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
|
Preview deployment for your docs. Learn more about Mintlify Previews.
💡 Tip: Enable Automations to automatically generate PRs for you. |
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
| face(w, t, `rotateX(-90deg) translateZ(${h / 2}px)`, { ...edge(front), n: [0, 1, 0] }); | ||
| for (const F of faces) | ||
| if (F.el.style.background.includes("repeating")) | ||
| F.el.style.backgroundImage = F.n[1] ? lines.replace("90deg", "90deg") : lines; |
| face(w, t, `rotateX(-90deg) translateZ(${h / 2}px)`, { ...edge(front), n: [0, 1, 0] }); | ||
| for (const F of faces) | ||
| if (F.el.style.background.includes("repeating")) | ||
| F.el.style.backgroundImage = F.n[1] ? lines.replace("90deg", "90deg") : lines; |
| face(w, t, `rotateX(-90deg) translateZ(${h / 2}px)`, { ...edge(front), n: [0, 1, 0] }); | ||
| for (const F of faces) | ||
| if (F.el.style.background.includes("repeating")) | ||
| F.el.style.backgroundImage = F.n[1] ? lines.replace("90deg", "90deg") : lines; |
| face(w, t, `rotateX(-90deg) translateZ(${h / 2}px)`, { ...edge(front), n: [0, 1, 0] }); | ||
| for (const F of faces) | ||
| if (F.el.style.background.includes("repeating")) | ||
| F.el.style.backgroundImage = F.n[1] ? lines.replace("90deg", "90deg") : lines; |
| face(w, t, `rotateX(-90deg) translateZ(${h / 2}px)`, { ...edge(front), n: [0, 1, 0] }); | ||
| for (const F of faces) | ||
| if (F.el.style.background.includes("repeating")) | ||
| F.el.style.backgroundImage = F.n[1] ? lines.replace("90deg", "90deg") : lines; |
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
2 participants
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.
feat(registry): 249 seamless image-loop blocks (95 motion families, 1:1)
What: 249 registry blocks named
loop-<family>[-<n>], one per loop variant, 1080×1080. Every block is a seamlessimage loop driven by ONE paused GSAP timeline that recomputes all card transforms from
t(seek-safe, deterministic),with
data-composition-variablesfor every engine parameter plusimage1..Ncontent slots (monochrome placeholders by default).95 families: rings/orbits/globes/spirals/tunnels (3D under CSS perspective), carousels/marquees/tickers/filmstrips, decks/stacks/flips,
grids/mosaics/wipes, wheels, parallax/field/proximity flythroughs, and more — see
docs/catalog/blocks/loop-*.mdx.How they were built: each family is a hand-written engine whose constants were measured against a set of 512² reference loops
(frame sheets, DOM probes, tracked edges) and graded match / partial / unverified per variant (181 / 30 / 38). The catalog blocks are a
mechanical transform of those engines (static duration, prefixed ids, inlined runtime, variables, async image decode) — generator and
notes live in the authoring repo, not here.
Validation
node scripts/lint-registry-items.mjs <all 249>→ 0 errorsnpx oxfmt --check registry/blocks/loop-*/*.html→ cleanhyperframes check(runtime, no-contrast) on one variant per family → see checklist belowregistry/registry.json,docs/catalog/,docs/public/catalog-index.jsonregenerated by the repo scriptsdocs/images/catalog/blocks/loop-*.{mp4,png}rendered at 720² (maintainers may regenerate withgenerate-catalog-previews.ts)Related items:
carousel-circle/orbit/path/vision/text-circle 1..5(#3790) cover five motion-designed carousels with swings and text;these blocks are uniform-speed seamless loops of the same image-card idiom and complement them (globe ≈ orbit's sphere, ring/wheel ≈ circle
are the closest pairs; mechanisms differ).
Usage guidance: 4–20 s loops; images any aspect (
mediaFitcrop/natural); setbackgroundType: solidfor a flat ground.Known pitfalls: root duration is fixed per block (change it by picking another variant); 3D families need
data-layout-allow-overflow(set);placeholders are data-URI SVGs, so an unset image slot never 404s.
preview: not published yet — 720² previews are rendered locally (
docs/images/catalog/blocks/loop-*.{mp4,png}, gitignored) and need the docs-images upload; happy to runhyperframes publishon request. Section curation and overlap with #3790 are open questions for review (see Related items).🤖 Generated with Claude Code