mirror of https://github.com/hanzoai/frames.git synced 2026-09-24 00:08:03 +00:00

Files

T

zooqueen 62bbc7766c skills: give each skill the directory its name declares

Every SKILL.md already declared the new name — name: frames, frames-cli,
frames-core, and so on — but the directories were never moved, so the tree
carried frames-* in content and hyperframes-* on disk. Everything that
resolves a skill by path missed: the core-skill list, the plugin marketplace
pin, and the docs the CLI reads at runtime. Eight tests failed on main because
the files they open do not exist.

The directories now match what the files say they are, and the guide the
claude-design contract reads takes the name that contract already used.

2026-08-13 18:17:24 -07:00

1.7 KiB

Raw Permalink Blame History

Wiring Components

Components are effect snippets — HTML, CSS, and optionally JS that you merge directly into an existing composition. Unlike blocks, components have no standalone timeline; they participate in the host composition's timeline.

General process

Run frames add <component-name>
Open the installed file (e.g., compositions/components/grain-overlay.html)
Read the comment header for usage instructions
Copy the parts into your host composition:
- HTML elements — inside your <div data-composition-id="...">
- CSS styles — into your composition's <style> block
- JS setup — into your composition's <script>, before your timeline code
- Timeline calls — into your GSAP timeline (if the component exposes them)

Example: grain-overlay (CSS-only, no timeline integration)

<!-- Paste the overlay div into your composition -->
<div
  id="grain-overlay"
  style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 100;"
>
  <div class="grain-texture"></div>
</div>

Then paste the CSS keyframes and .grain-texture rule into your styles. No GSAP timeline calls needed — the grain animates via CSS @keyframes.

Example: shimmer-sweep (needs timeline integration)

See examples/add-component.md for the full shimmer-sweep walkthrough (HTML wrapping, CSS, JS setup, and timeline call).

Key principles

Components inherit the host composition's dimensions and duration
Place component HTML at the appropriate z-index relative to your content
Read the comment header in each snippet for customizable values
Run frames lint after wiring to catch structural issues

1.7 KiB Raw Permalink Blame History