mirror of
https://github.com/heygen-com/hyperframes.git
synced 2026-09-04 07:19:52 +00:00
feat(skills): add gsap-effects skill with typewriter pattern (#158)
* feat(skills): add gsap-effects skill with typewriter pattern Distills typewriter text animation into a reusable reference: basic typewriter, blinking cursor, word rotation, appending words, and a characters-per-second timing guide. Uses GSAP TextPlugin. Also references the new skill from compose-video. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(skills): emphasize cursor must always blink when idle and sit flush Two key rules added to the typewriter skill: 1. Cursor must blink in every idle state (after typing, after clearing, during hold pauses) — a solid idle cursor looks broken. 2. No whitespace between text and cursor elements in HTML — any gap between the last character and the caret looks wrong. Also adds cursor-hide state for multi-line handoffs and updates word rotation example to include cursor state management. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(skills): backspace must delete from end, not front TextPlugin's text:{value:""} removes characters from the front, which looks wrong. Added a backspace helper that steps through substrings from right to left using tl.call(). Updated word rotation example to use it. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(skills): handoffs must blink before typing, use margin for spacing Two lessons from testing: 1. Cursor handoffs need a blink pause — going hide→solid directly skips the idle state. Pattern: hide→blink→pause→solid→type→blink. 2. Use margin-left on a wrapper span for spacing between static and dynamic text. Flex gap spaces the cursor away, trailing spaces collapse. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix(skills): enforce single visible cursor as a hard rule Only one cursor may be visible at a time. Multiple cursors on screen looks broken. Every other cursor must be cursor-hide. Promoted to rule #1 in the cursor section. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
05aceedd30
commit
e7283e5ce3
@@ -139,6 +139,7 @@ Video must be `muted playsinline`. Audio is always a separate `<audio>` element:
|
||||
|
||||
For PiP, title cards, and slide show patterns, see [patterns.md](./patterns.md).
|
||||
For data, stats, and infographics, see [data-in-motion.md](./data-in-motion.md).
|
||||
For typewriter text and other GSAP animation effects, see the `gsap-effects` skill.
|
||||
|
||||
## Output Checklist
|
||||
|
||||
|
||||
Reference in New Issue
Block a user