feat(registry): seed components — grain-overlay, shimmer-sweep, grid-pixelate-wipe#260
Conversation
9d414cd to
7c0c1d5
Compare
miguel-heygen
left a comment
miguel-heygen
left a comment
There was a problem hiding this comment.
Review: seed components — grain-overlay, shimmer-sweep, grid-pixelate-wipe
Solid first batch of components. The snippet/demo convention is well-established, the registry-item.json manifests validate against the schema, and the CONTRIBUTING.md additions give clear guidance for future contributors. The extraction of grain-overlay from warm-grain is a clean decomposition.
Approving with a few non-blocking suggestions below.
What works well
- CSS scoping is correct.
#grain-overlay .grain-textureand#grid-pixelate-overlay .grid-cellscope selectors under their respective ID roots — no collision risk when merged into a host composition. - Schema compliance. All three
registry-item.jsonfiles usetype: "hyperframes:component"with nodimensions/duration(matching theallOfconditional in the schema). File types arehyperframes:snippetas expected. - demo.html convention. Each demo is a valid standalone composition with
data-composition-id,data-width/height/duration, andwindow.__timelinesregistration. The IDs use<name>-demosuffix to avoid collisions with the snippet itself. - GSAP patterns. No deprecated APIs. Timelines are
paused: true, registered onwindow.__timelines, and use standard IIFE isolation. ThefromToin shimmer-sweep for custom property animation is the correct approach for deterministic frame rendering. - grid-pixelate-wipe snippet includes a guard. The
if (!overlay) return;in the snippet script is good defensive practice for a mergeable snippet. - CONTRIBUTING.md. The checklist and directory structure docs are clear and actionable.
Suggestions (non-blocking)
1. @keyframes grain-noise name collision risk
The @keyframes grain-noise name is global to the document. If a user independently defines @keyframes grain-noise (or if warm-grain example uses the same name — which it does), they'll collide silently. Consider namespacing: @keyframes hf-grain-noise or @keyframes grain-overlay-noise. Same consideration for the selector reference in the animation property.
This isn't a blocker since components are paste-once snippets and the warm-grain example won't be merged alongside the component, but it's worth establishing a naming convention early — especially before other components ship with their own keyframes.
2. External dependency on transparenttextures.com
Both grain-overlay.html and its demo.html load a texture from https://www.transparenttextures.com/patterns/natural-paper.png. If this CDN goes down or blocks hotlinking, the grain effect breaks silently (just an invisible overlay). Consider:
- Documenting this dependency in the snippet comment header
- Or noting in the customization section that users should self-host the texture for production
3. shimmer-sweep: mask injection timing
The auto-injection script in shimmer-sweep.html runs at parse time (IIFE), which works correctly when the snippet <script> appears after the .shimmer-sweep-target elements in the DOM. The comment header says "paste this snippet into your composition" but doesn't specify that it must go after the target elements. A one-liner in the usage docs would prevent a subtle ordering bug for users.
4. grid-pixelate-wipe demo: .grid-cell selector is unscoped in timeline
In the demo's GSAP timeline, .grid-cell is used as a bare class selector. This works in the demo because it's the only composition, but the snippet comment example also uses .grid-cell unscoped. For consistency with the scoping done in CSS (#grid-pixelate-overlay .grid-cell), the timeline integration example in the comment block could use the scoped selector #grid-pixelate-overlay .grid-cell to reinforce the pattern.
5. Minor: demo.html boilerplate could reference a shared base
All three demos repeat the same <head> boilerplate (reset CSS, GSAP CDN, viewport meta). Not actionable now, but as the component count grows, a shared demo-base.html template or a demo-template in CONTRIBUTING.md would reduce drift between demos.
All of these are suggestions for future iteration, not blockers. The components are clean, correctly scoped, and ready for the registry.
7c0c1d5 to
f805fc8
Compare
aa0efe5 to
15fc98d
Compare
Merge activity
|
…pixelate-wipe Three reusable effect components for the registry: - grain-overlay: Animated film grain texture overlay (extracted from warm-grain example) - shimmer-sweep: CSS gradient light sweep across text/elements (AI accent effect) - grid-pixelate-wipe: Grid-based dissolve transition between scenes Each component includes a snippet HTML for embedding and a demo.html for previewing. Establishes the demo.html convention in CONTRIBUTING.md.
f805fc8 to
a8595ca
Compare
2 participants
What
Three reusable effect components for the registry, each with a snippet HTML and companion
demo.html:grain-overlayshimmer-sweepgrid-pixelate-wipeEstablishes the
demo.htmlconvention inCONTRIBUTING.md.Why
Phase B of the catalog plan — seed the first components in the registry. Components are effect snippets that get merged into existing compositions (vs. blocks which are standalone sub-compositions).
How
steps(1)keyframe animation for the random-noise effect.--shimmer-pos) animated by GSAP. The gradient mask usesmix-blend-mode: overlayfor a natural light sweep. Auto-injects.shimmer-maskelements into.shimmer-sweep-targetwrappers..grid-cellscaledirectly in their timeline.Simplify review addressed: scoped
.grain-textureunder#grain-overlay, scoped.grid-cellunder#grid-pixelate-overlay, removedwindow.gridPixelateIn/Outglobals in favor of direct GSAP patterns.Each component ships a
demo.html— a standalone composition that previews the effect and doubles as a fixture for the CI preview pipeline (PR 8).Test plan
hyperframes add grain-overlayinstalls tocompositions/components/grain-overlay.htmlhyperframes add shimmer-sweepinstalls tocompositions/components/shimmer-sweep.htmlhyperframes add grid-pixelate-wipeinstalls tocompositions/components/grid-pixelate-wipe.html--jsonoutput with snippet and type inforegistry-item.jsonfiles validate against the JSON Schemademo.htmlfiles are self-contained with correctdata-composition-idandwindow.__timelinesregistrationoxfmt --checkandoxlintpass on all filesCONTRIBUTING.mddocuments thedemo.htmlconvention and registry item checklist