feat(skills): add gsap-effects skill with typewriter pattern#158
Merged
vanceingalls merged 5 commits intomainfrom Mar 31, 2026
Merged
feat(skills): add gsap-effects skill with typewriter pattern#158vanceingalls merged 5 commits intomainfrom
vanceingalls merged 5 commits intomainfrom
Conversation
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>
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>
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>
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>
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>
miguel-heygen
approved these changes
Mar 31, 2026
jrusso1020
reviewed
Mar 31, 2026
|
|
||
| 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. |
Collaborator
There was a problem hiding this comment.
Only caveat I'm not sure if you can reference skills like this in other skills safely
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
gsap-effectsskill directory for reusable GSAP animation patternscompose-videoTypewriter patterns included
Test plan
Screen.Recording.2026-03-31.at.11.30.19.AM.mov
🤖 Generated with Claude Code