fix(text): glitch, roll text improvements#498
Merged
Conversation
Replace dual-panel keyframes with a single flex stack and -50% translate for cleaner baseline alignment and per-unit stagger timing. Co-authored-by: Cursor <cursoragent@cursor.com>
Move keyframes and tuning to glitch-text.css with em-scaled offsets, optional props for React ergonomics, and updated docs plus landing usage. Co-authored-by: Cursor <cursoragent@cursor.com>
SectionThree is not mounted on the current landing page. Co-authored-by: Cursor <cursoragent@cursor.com>
These blocks are not imported by the current landing page. Co-authored-by: Cursor <cursoragent@cursor.com>
Document the /components pictogram spec and link it from the contributing index and component authoring flow. Co-authored-by: Cursor <cursoragent@cursor.com>
Deploying animata with
|
| Latest commit: |
a13f5b0
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://79303c43.animata.pages.dev |
| Branch Preview URL: | https://feat-glitch-roll-text-improv.animata.pages.dev |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (4)
✅ Files skipped from review due to trivial changes (3)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThis PR refactors GlitchText into a reusable CSS-driven component, rewrites RollText's stack-based animation system and timing, and adds canonical category-glyph contributing docs and a practical glyph spec. ChangesGlitchText Component Refactor
RollText Animation Update
Category Glyph and Contributing Docs
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
content/docs/contributing/index.mdx (1)
27-27: 💤 Low valueConsider aligning terminology with components.mdx for consistency.
This line says "new component category" while
content/docs/contributing/components.mdx:49says "top-level category (new sidebar section)". Using consistent terminology across both files would improve clarity, since "top-level category" more precisely describes the categories that require glyphs (those appearing on/components, not meta sections like "Getting Started" or "Contributing").♻️ Suggested alignment
-When you add a **new component category**, also read [category glyph tiles](/docs/contributing/category-glyphs) — the SVG pictograms on `/components` follow a strict three-shade, stroke-tier spec documented in `animata/skeleton/CATEGORY-GLYPHS.md`. +When you add a **new top-level component category** (new sidebar section), also read [category glyph tiles](/docs/contributing/category-glyphs) — the SVG pictograms on `/components` follow a strict three-shade, stroke-tier spec documented in `animata/skeleton/CATEGORY-GLYPHS.md`.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@content/docs/contributing/index.mdx` at line 27, Replace the phrase "new component category" in the sentence starting with "When you add a **new component category**" so it matches the terminology used in content/docs/contributing/components.mdx — e.g., change it to "top-level category (new sidebar section)"; update the surrounding sentence to read "When you add a top-level category (new sidebar section), also read [category glyph tiles]…" to ensure consistency with components.mdx and clarify that this applies to categories shown on /components.animata/text/roll-text.tsx (1)
247-253: ⚡ Quick win
onAnimationEndfires once per segment, not once per animation cycle.The prop
onAnimationEnd(inherited from the span props) is forwarded from each segment's stack animation. With character-level stagger, this fires N times (one per character). Consumers expecting a single "animation complete" callback may be surprised.Consider either:
- Documenting this behavior clearly in JSDoc.
- Providing a separate
onRollCompleteprop that fires only when all segments finish (at line 252).Option 2: Add dedicated completion callback
export interface RollTextProps extends Omit<React.ComponentPropsWithoutRef<"span">, "children"> { ... + /** Called once when the entire roll animation completes. */ + onRollComplete?: () => void; }const handleStackAnimationEnd = (event: React.AnimationEvent<HTMLSpanElement>) => { onAnimationEnd?.(event); if (phaseRef.current !== "animating") return; remainingRef.current -= 1; - if (remainingRef.current <= 0) setPhase("open"); + if (remainingRef.current <= 0) { + setPhase("open"); + onRollComplete?.(); + } };🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@animata/text/roll-text.tsx` around lines 247 - 253, The handleStackAnimationEnd handler currently forwards the inherited onAnimationEnd for every character segment, causing N callbacks; change the component API to accept a new onRollComplete?: () => void prop and keep onAnimationEnd behavior for per-segment events but invoke onRollComplete only when remainingRef.current <= 0 (just before calling setPhase("open")). Update the component props/type declarations to include onRollComplete, and ensure handleStackAnimationEnd (and any callers) call onRollComplete once when the final segment finishes while preserving existing phaseRef/remainingRef logic.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@animata/text/glitch-text.stories.tsx`:
- Line 18: The className for the headline story is using the mono font variable;
update the value where className is defined (the line with className:
"font-(family-name:--font-mono) ...") to reference the display font variable
instead (use --font-display) so the headline uses the correct display font;
ensure the rest of the class string (text-8xl font-bold tracking-tight
text-white) remains unchanged.
In `@content/docs/contributing/category-glyphs.mdx`:
- Around line 57-60: Update the documentation to match the real implementation:
state that the base class is "cg-motion" (used via className={cn("cg-motion",
...)}) rather than "cg cg-<name>", and clarify that the hover transforms are not
in category-glyphs.css but applied inline as Tailwind utility classes composed
with cn() (e.g., motion-safe:group-hover/cg:scale-x-125), while
category-glyphs.css only defines base transform-box, transform-origin, and
transition properties for .cg-motion.
---
Nitpick comments:
In `@animata/text/roll-text.tsx`:
- Around line 247-253: The handleStackAnimationEnd handler currently forwards
the inherited onAnimationEnd for every character segment, causing N callbacks;
change the component API to accept a new onRollComplete?: () => void prop and
keep onAnimationEnd behavior for per-segment events but invoke onRollComplete
only when remainingRef.current <= 0 (just before calling setPhase("open")).
Update the component props/type declarations to include onRollComplete, and
ensure handleStackAnimationEnd (and any callers) call onRollComplete once when
the final segment finishes while preserving existing phaseRef/remainingRef
logic.
In `@content/docs/contributing/index.mdx`:
- Line 27: Replace the phrase "new component category" in the sentence starting
with "When you add a **new component category**" so it matches the terminology
used in content/docs/contributing/components.mdx — e.g., change it to "top-level
category (new sidebar section)"; update the surrounding sentence to read "When
you add a top-level category (new sidebar section), also read [category glyph
tiles]…" to ensure consistency with components.mdx and clarify that this applies
to categories shown on /components.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 4d737c97-0e49-48e0-877e-5c441978a1fc
📒 Files selected for processing (13)
animata/text/glitch-text.cssanimata/text/glitch-text.stories.tsxanimata/text/glitch-text.tsxanimata/text/roll-text.cssanimata/text/roll-text.tsxapp/(main)/_landing/section-one.tsxapp/(main)/_landing/section-three.tsxapp/(main)/_landing/section-two.tsxcontent/docs/contributing/category-glyphs.mdxcontent/docs/contributing/components.mdxcontent/docs/contributing/index.mdxcontent/docs/text/glitch-text.mdxcontent/docs/text/index.mdx
💤 Files with no reviewable changes (3)
- app/(main)/_landing/section-three.tsx
- app/(main)/_landing/section-one.tsx
- app/(main)/_landing/section-two.tsx
Document cg-motion + Tailwind hover utilities, shade tokens on category-skeleton.tsx, and add the canonical CATEGORY-GLYPHS.md spec. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@animata/skeleton/CATEGORY-GLYPHS.md`:
- Line 41: Update the SOFT row so the color-mix formula is unambiguous: replace
the placeholder "ink" with the actual CSS variable or add a short note mapping
the placeholder to the variable (e.g., show color-mix(in oklab, var(--cg-ink)
50%, transparent) or append “(formula shown conceptually; 'ink' =
var(--cg-ink))”) and keep the `--cg-soft` column label and description
unchanged.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 6c15a4af-cba7-4e95-a38e-e17b0d997794
📒 Files selected for processing (2)
animata/skeleton/CATEGORY-GLYPHS.mdcontent/docs/contributing/category-glyphs.mdx
✅ Files skipped from review due to trivial changes (1)
- content/docs/contributing/category-glyphs.mdx
hari
approved these changes
Jun 11, 2026
Webpack's lazy context for @/animata/* was picking up CATEGORY-GLYPHS.md and failing the build. Relocate the spec to content/docs/contributing/. Co-authored-by: Cursor <cursoragent@cursor.com>
Make the published docs self-contained, drop repo-path references, and tighten the hover and shade copy for contributors. Co-authored-by: Cursor <cursoragent@cursor.com>
There was a problem hiding this comment.
♻️ Duplicate comments (1)
content/docs/contributing/category-glyphs-spec.md (1)
41-41:⚠️ Potential issue | 🟡 Minor | ⚡ Quick winClarify the color-mix formula notation.
The formula still uses "ink" as a placeholder rather than the actual CSS variable reference. Since the table shows concrete CSS variable names in other columns (
--cg-ink,--cg-soft), this inconsistency may confuse readers.📝 Suggested fix
-| **SOFT** | `--cg-soft` | `color-mix(in oklab, ink 50%, transparent)` | same formula | Supporting content — secondary bars, inactive labels, mid stack layers | +| **SOFT** | `--cg-soft` | `color-mix(in oklab, var(--cg-ink) 50%, transparent)` | same formula | Supporting content — secondary bars, inactive labels, mid stack layers |🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@content/docs/contributing/category-glyphs-spec.md` at line 41, In the table row for the SOFT glyph, replace the placeholder "ink" in the color-mix expression with the actual CSS variable reference so it matches other cells; update the formula from "color-mix(in oklab, ink 50%, transparent)" to use var(--cg-ink) (e.g., "color-mix(in oklab, var(--cg-ink) 50%, transparent)") and ensure the column that shows the concrete CSS variable name references --cg-soft consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Duplicate comments:
In `@content/docs/contributing/category-glyphs-spec.md`:
- Line 41: In the table row for the SOFT glyph, replace the placeholder "ink" in
the color-mix expression with the actual CSS variable reference so it matches
other cells; update the formula from "color-mix(in oklab, ink 50%, transparent)"
to use var(--cg-ink) (e.g., "color-mix(in oklab, var(--cg-ink) 50%,
transparent)") and ensure the column that shows the concrete CSS variable name
references --cg-soft consistently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 18616183-3c6f-4aa7-8abe-5808e66b6e3a
📒 Files selected for processing (4)
content/docs/contributing/category-glyphs-spec.mdcontent/docs/contributing/category-glyphs.mdxcontent/docs/contributing/components.mdxcontent/docs/contributing/index.mdx
✅ Files skipped from review due to trivial changes (1)
- content/docs/contributing/components.mdx
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
2 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 by CodeRabbit
New Features
Improvements
Documentation
Changes