diff --git a/docs/guides/claude-design.mdx b/docs/guides/claude-design.mdx
index 40fdec7bf..6fca49246 100644
--- a/docs/guides/claude-design.mdx
+++ b/docs/guides/claude-design.mdx
@@ -115,7 +115,7 @@ The more specific your prompt, the better the output. Include palette, fonts, du
- **In-pane preview** — scrubbing is unreliable in Claude Design's iframe sandbox. Download and use `npx hyperframes preview` locally for reliable playback.
- **No linting** — Claude Design can't run `npx hyperframes lint`. The template-first skeletons handle structural validity, but the self-review checklist is the only QA before download.
-- **No shaders on vertical** — HyperShader's WebGL canvas is hardcoded to 1920x1080. Vertical (1080x1920) compositions use hard cuts only.
+- **Shaders work at any aspect ratio** — vertical (1080x1920), landscape (1920x1080), and square (1080x1080) all supported. HyperShader reads dimensions from `data-width`/`data-height` on the composition root.
- **3 fetch limit** — Claude Design limits web fetches per turn. All critical rules are inlined in the skill; external references are for edge cases only.
- **Seeking backwards** — scrubbing backwards in the in-pane preview can show blank frames (async capture race condition). Forward seeking usually works.
diff --git a/skills/claude-design-hyperframes/SKILL.md b/skills/claude-design-hyperframes/SKILL.md
index 35e45f1bf..037bf0551 100644
--- a/skills/claude-design-hyperframes/SKILL.md
+++ b/skills/claude-design-hyperframes/SKILL.md
@@ -524,7 +524,7 @@ npx hyperframes render index.html -o output.mp4
### Skeleton A -- Social Reel (1080x1920, 15s, 6 scenes)
-All hard cuts. **No shader transitions** -- HyperShader's WebGL canvas is hardcoded to 1920x1080. It does not support vertical (1080x1920) compositions. Shaders render at the wrong aspect ratio and distort. For vertical video, rely on entrance animations and mid-scene activity to carry the energy.
+Transition plan: s1→s2 hard cut, s2→s3 hard cut, **s3→s4 SHADER** (hero reveal), s4→s5 hard cut, s5→s6 hard cut. One shader at the midpoint.
```html
@@ -534,7 +534,7 @@ All hard cuts. **No shader transitions** -- HyperShader's WebGL canvas is hardco
-
+
@@ -638,8 +638,6 @@ All hard cuts. **No shader transitions** -- HyperShader's WebGL canvas is hardco
data-start="0"
data-duration="15"
>
-
-
@@ -662,31 +660,33 @@ All hard cuts. **No shader transitions** -- HyperShader's WebGL canvas is hardco
+
-
+
+
-
+
@@ -723,14 +723,12 @@ All hard cuts. **No shader transitions** -- HyperShader's WebGL canvas is hardco
window.__timelines = window.__timelines || {};
var tl = gsap.timeline({ paused: true });
- // --- Scene toggles (REQUIRED — use autoAlpha, not visibility) ---
+ // --- Non-anchor scene toggles (REQUIRED — use autoAlpha) ---
tl.set("#s1", { autoAlpha: 0 }, 2.5);
tl.set("#s2", { autoAlpha: 1 }, 2.5);
tl.set("#s2", { autoAlpha: 0 }, 5.0);
- tl.set("#s3", { autoAlpha: 1 }, 5.0);
- tl.set("#s3", { autoAlpha: 0 }, 7.5);
- tl.set("#s4", { autoAlpha: 1 }, 7.5);
- tl.set("#s4", { autoAlpha: 0 }, 10.0);
+ // s3, s4 are shader anchors — HyperShader manages their opacity
+ tl.set("#s3", { opacity: 1 }, 5.0); // first anchor must be explicitly shown
tl.set("#s5", { autoAlpha: 1 }, 10.0);
tl.set("#s5", { autoAlpha: 0 }, 12.5);
tl.set("#s6", { autoAlpha: 1 }, 12.5);
@@ -741,10 +739,10 @@ All hard cuts. **No shader transitions** -- HyperShader's WebGL canvas is hardco
// === SCENE 2 (2.5-5s) ===
// FILL: entrance + mid-scene activity
- // === SCENE 3 (5-7.5s) ===
+ // === SCENE 3 (5-7.5s) — SHADER ANCHOR, no exit tweens ===
// FILL: entrance + mid-scene activity
- // === SCENE 4 (7.5-10s) — hero ===
+ // === SCENE 4 (7.5-10s) — hero (shader reveals this) ===
// FILL: entrance + mid-scene activity
// === SCENE 5 (10-12.5s) — proof ===
@@ -753,7 +751,15 @@ All hard cuts. **No shader transitions** -- HyperShader's WebGL canvas is hardco
// === SCENE 6 (12.5-15s) — CTA, final scene, exit OK ===
// FILL: entrance + mid-scene activity + optional exit
- // No HyperShader — vertical compositions use hard cuts only.
+ // --- Shader: 1 transition at the hero reveal ---
+ window.HyperShader.init({
+ bgColor:
+ getComputedStyle(document.documentElement).getPropertyValue("--bg").trim() || "#0a0a0d",
+ scenes: ["s3", "s4"],
+ timeline: tl,
+ transitions: [{ time: 7.25, shader: "cinematic-zoom", duration: 0.5 }],
+ });
+
window.__timelines["main"] = tl;