本文へ移動
cccskills
無料GitHub で公開

canopy-part-title

Leaves sweep through the frame and part to reveal the headline. HyperFrames block, 1920×1080, 12s, 11 variables.

インストール方法を見る

含まれるファイル(5)

  • SKILL.md3.9 KB
  • assets/leaf-surface-color.webp64.3 KB
  • assets/leaf-surface-normal.webp135.6 KB
  • canopy-part-title.html57.1 KB
  • registry-item.json1.3 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Canopy Part Title

A dense canopy of textured leaves sweeps across the frame with shallow depth of field, then parts to uncover the first headline; a second, depth-lifted batch carries the second headline past the camera. A handful of leaves stay behind on the type and keep a light breeze. Font, weight, size, letter spacing, leaf counts, sweep speed and the retained-leaf breeze are variables.

Composition id: canopy-part-title. Duration 12 s at 30 fps, 1920×1080.

Files

  • canopy-part-title.html (57 KB)
  • assets/leaf-surface-color.webp (64 KB)
  • assets/leaf-surface-normal.webp (136 KB)

Install

Install with npx hyperframes add canopy-part-title; by default the files above land under compositions/canopy-part-title/. Then mount the block from the host index.html:

<div
  data-composition-id="canopy-part-title"
  data-composition-src="compositions/canopy-part-title/canopy-part-title.html"
  data-start="0"
  data-duration="12"
  data-track-index="1"
  data-width="1920"
  data-height="1080"
></div>

Render with custom values by targeting the composition file directly:

npx --yes hyperframes@0.8.12 render 'compositions/canopy-part-title/canopy-part-title.html' --variables '{"headline1":"Understory","headline2":"Move slowly"}'

Variables

Read at runtime via window.__hyperframes.getVariables(); declared on the composition root as data-composition-variables (single-quoted attribute, plain JSON).

idtypedefaultlabel / range
headline1string"Understory"Headline 1
headline2string"Move slowly"Headline 2
fontstring"Helvetica"Headline font
fontWeightnumber900Font weight 100–900 step 100
fontSizenumber1Font size (1 = auto-fit) 0.3–2 step 0.01
letterSpacingnumber0.01Letter spacing (em) -0.2–1 step 0.01
backgroundcolor"#020805"Background
leafCountnumber170Leaves per sweep 40–320 step 1
stayCountnumber5Leaves left behind 0–20 step 1
sweepSpeednumber1Sweep speed 0.3–3 step 0.05
retainedBreezenumber1Retained leaf breeze 0–2 step 0.05

Runtime contract

  • One paused GSAP timeline registered as window.__timelines["canopy-part-title"].
  • Re-syncs on the hf-seek CustomEvent; every frame is a closed-form function of time (seeded PRNG only, no rAF loops, no Date.now).
  • Renderer: three.js 0.170.0, GSAP 3.14.2, Canvas 2D, Post-processing, Seeded PRNG, Shadow maps. Budget roughly 350 MB per live instance; run one at a time.
  • External runtime dependencies: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js, https://cdn.jsdelivr.net/npm/three@0.170.0/build/three.module.js, https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/EffectComposer.js, https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/RenderPass.js, https://cdn.jsdelivr.net/npm/three@0.170.0/examples/jsm/postprocessing/BokehPass.js.
  • Web fonts from Google Fonts: Gelasio.

Editing rules (from the source project)

  1. Keep data-composition-variables a single-quoted attribute with plain " JSON. Never save it through Studio's Design panel.
  2. Do not put <canvas> in static markup; create it at runtime.
  3. Keep every visual state a function of t; seek-safety is what makes the block renderable.

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Overlay doctrine for the embedded-captions workflow — the caption MODEL (drop / rail / embed) and the rule that captions are an OVERLAY composited on top of the film, never a reserved bottom band you shift content up to avoid. Load when adding captions/subtitles to a talking-head or launch video, when deciding whether a phrase should be dropped, ride the verbatim rail, or be promoted to a scarce embedded climax, when laying out a composition that will carry captions (do NOT reserve a keep-out band), or when centering a composition on the true frame center under captions. Quotes the rail+embed model from embedded-captions and constraint

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes6万2026年10月10日 更新

Turn a weekly changelog .md into a finished branded changelog video (square 1080, ~45-60s, Annie VO, animated brand background, mock-UI visualizations, lowkey captions). Use when the user provides a changelog/digest markdown and wants the weekly video, or says "changelog video". Self-contained — fonts, background, lexicon, and scripts ship in this skill.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes6万2026年10月10日 更新

A tiled headline surface flips cell by cell under a sweeping depth field to reveal the rear headline. HyperFrames block, 1920×1080, 8s, 18 variables.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes6万2026年10月10日 更新

A chain of bevelled cuboids rides a travelling wave as a content carousel. HyperFrames block, 1920×1080, 6.666666666666667s, 40 variables.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes6万2026年10月10日 更新

The technique catalog: five velocity-matched SEAMS (zoom-through, INVERSE zoom-through, cut-the-curve, waterfall cut, rack-focus blur-cut) plus the two in-scene techniques — waterfall ENTRY (staggered arrival cascades for title cards / segment openers) and the nudge curve (slow-fast-slow three-phase group slides). Covers partial-travel (~12% of frame) velocity matching via mirrored power4 eases, the Z scale-sign rule, size-scaled blur (10px text / 18-20px full-frame), word-by-word staggered cuts, cascade pacing by element weight, and the 10/65/25 slide ratio. Read before authoring any transition, text-beat handoff, kinetic text entry, or group reposition. [depth, zoom, inverse-zoom, scale-sign, mirrored-zoom, rack-focus, pacing, velocity, cut-the-curve, waterfall, stagger, cascade, kinetic-text, title-card, segment-opener, nudge, slide, easing, group-motion, z-depth, motion-graphics, cinematic, transition, blur, directional-continuity]

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes6万2026年10月10日 更新

Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet `anchor` rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.

日本語の概要は準備中です。原文の説明を表示しています。

heygen-com/hyperframes6万2026年10月10日 更新

heygen-com のスキルをすべて見る

このスキルの問題を報告する