canopy-part-title

تیترهای شما را با شکافتن موجی از برگ‌های متحرک و سه‌بعدی آشکار می‌کند.

این Skill یک بلاک آمادهٔ HyperFrames برای ساخت ویدیوی ۱۲ ثانیه‌ای در ابعاد 1920×1080 است؛ موجی متراکم از برگ‌ها از مقابل دوربین عبور می‌کند، تیترها را آشکار می‌سازد و چند برگ با نسیمی ظریف روی نوشته باقی می‌مانند.

با تغییر متغیرهایی مثل تیترها، فونت، تعداد برگ‌ها، سرعت حرکت و شدت نسیم، می‌توانید به‌سرعت یک معرفی سینمایی برای برند، محصول یا محتوای ویدیویی بسازید و آن را با CLI رندر کنید.

چه چیزی می‌گیرید

Composition آمادهٔ `canopy-part-title` برای HyperFrames
انیمیشن ۱۲ ثانیه‌ای با timeline قابل seek و رندرپذیر
۱۱ متغیر قابل تنظیم برای تیتر، تایپوگرافی، برگ‌ها و سرعت حرکت
فایل HTML به‌همراه textureهای برگ و پشتیبانی از three.js و GSAP
دستور نصب و نمونهٔ رندر با `npx hyperframes`

برای چه کاری خوب است

برای تیزرهای معرفی محصول، برند یا کمپین‌هایی با هویت طبیعی و سینمایی
برای سازندگان ویدیو که می‌خواهند تیترهای متحرک را بدون ساخت انیمیشن از صفر تولید کنند
برای پروژه‌های HyperFrames که به یک reveal چشمگیر در ابتدا یا میانهٔ ویدیو نیاز دارند

برای چه کاری نیست

ویدیوهای سبک و کم‌مصرفی که اجرای three.js و صدها برگ برایشان بیش‌ازحد سنگین است
پروژه‌هایی که به تعامل لحظه‌ای کاربر یا انیمیشن کاملاً مبتنی بر محتوای زنده نیاز دارند

دربارهٔ این اسکیل

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).

id	type	default	label / range
`headline1`	string	`"Understory"`	Headline 1
`headline2`	string	`"Move slowly"`	Headline 2
`font`	string	`"Helvetica"`	Headline font
`fontWeight`	number	`900`	Font weight 100–900 step 100
`fontSize`	number	`1`	Font size (1 = auto-fit) 0.3–2 step 0.01
`letterSpacing`	number	`0.01`	Letter spacing (em) -0.2–1 step 0.01
`background`	color	`"#020805"`	Background
`leafCount`	number	`170`	Leaves per sweep 40–320 step 1
`stayCount`	number	`5`	Leaves left behind 0–20 step 1
`sweepSpeed`	number	`1`	Sweep speed 0.3–3 step 0.05
`retainedBreeze`	number	`1`	Retained 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)

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

دانلود ZIP