fix(docs): text animator demo and co located css#501
Merged
Conversation
Move keyframes and selectors Tailwind cannot express into imported .css files, update manual install docs for multi-file touch commands, and bundle co-located css in the registry build. Co-authored-by: Cursor <cursoragent@cursor.com>
Bare text-animator runtime, co-located demo css for index and Storybook, TextAnimatorListDemo wrapper for lazy-loaded MDX previews, and updated preset docs with runtime install steps. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
|
Caution Review failedThe pull request is closed. ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThis PR moves inline component styles into co-located ChangesCSS Externalization & Text Animator Infrastructure
Estimated code review effort 🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
Deploying animata with
|
| Latest commit: |
8ccecaa
|
| Status: | ⚡️ Build in progress... |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (3)
content/docs/card/collab-card.mdx (1)
25-25: 💤 Low valueConsider plural wording for clarity.
The text says "This creates
collab-card.tsx" but the command creates two files (.tsxand.css). Consider: "This createscollab-card.tsxandcollab-card.cssincomponents/animata/card."🤖 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/card/collab-card.mdx` at line 25, Update the sentence that currently reads "This creates `collab-card.tsx` in `components/animata/card`" to list both generated files; change it to something like "This creates `collab-card.tsx` and `collab-card.css` in `components/animata/card`" so it accurately reflects that both the .tsx and .css files are created (referencing the filenames `collab-card.tsx`, `collab-card.css` and the folder `components/animata/card`).content/docs/card/card-spread.mdx (1)
21-21: 💤 Low valueConsider plural wording for clarity.
The text says "a new file
card-spread.tsx" but the command creates two files (.tsxand.css). Consider: "It will create new filescard-spread.tsxandcard-spread.cssinside thecomponents/animata/carddirectory."🤖 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/card/card-spread.mdx` at line 21, The sentence currently states it will create "a new file `card-spread.tsx`" but the generator actually creates two files; update the wording to plural and list both files so it's accurate: change the phrase to something like "It will create new files `card-spread.tsx` and `card-spread.css` inside the `components/animata/card` directory" ensuring you reference both filenames (`card-spread.tsx`, `card-spread.css`) and keep directory `components/animata/card`.content/docs/button/ripple-button.mdx (1)
21-21: 💤 Low valueConsider plural wording for clarity.
The text says "a new file called
ripple-button.tsx" but the command creates two files (.tsxand.css). Consider: "It will create new filesripple-button.tsxandripple-button.cssinside thecomponents/animata/buttondirectory."🤖 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/button/ripple-button.mdx` at line 21, Update the sentence to use plural and list both created files: change "It will create a new file called `ripple-button.tsx` inside the `compoents/animata/button` directory." to something like "It will create new files `ripple-button.tsx` and `ripple-button.css` inside the `components/animata/button` directory." — reference the filenames `ripple-button.tsx`, `ripple-button.css` and the directory name `components/animata/button`.
🤖 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/button/algolia-white-button.tsx`:
- Line 6: Update the button label string that currently reads "Aloglia White" to
the correct spelling "Algolia White" in the component rendered by
algolia-white-button.tsx (look for the JSX/return that renders the button label
"Aloglia White" and replace that literal with "Algolia White"); ensure any
aria-labels, tests, or i18n keys in the same file that repeat the typo are also
updated to maintain consistency.
In `@animata/feature-cards/content-scan.css`:
- Around line 8-10: Replace the hardcoded highlight/background colors with theme
design tokens: update .highlight.active (currently using `#dad9fe`) to use the
brand highlight token (e.g. var(--color-brand-yellow) or your theme token name
such as --token-highlight-bg set to `#ffcc00`) and replace the hardcoded text
color (the occurrence of `#4b0082`) with the appropriate theme text token (e.g.
var(--color-on-highlight) or --token-text-color) so both .highlight.active and
any .highlight text styles use theme tokens instead of literal hex values.
In `@content/docs/button/algolia-blue-button.mdx`:
- Around line 21-24: Update the explanatory sentence in
content/docs/button/algolia-blue-button.mdx to reflect that the command creates
both a .tsx and a .css file (algolia-blue-button.tsx and
algolia-blue-button.css) in the components/animata/button directory so it
matches the bash command shown (mkdir -p components/animata/button && touch
components/animata/button/algolia-blue-button.tsx
components/animata/button/algolia-blue-button.css); keep the rest of the prose
intact.
In `@content/docs/button/ripple-button.mdx`:
- Line 21: Update the misspelled directory name in the prose: replace
"compoents/animata/button" with the correct "components/animata/button" in the
text that says it will create `ripple-button.tsx`; search for the string
"compoents/animata/button" (near the mention of `ripple-button.tsx`) and correct
it to "components/animata/button".
In `@content/docs/fabs/flower-menu.mdx`:
- Line 22: Update the two sentences that currently state only creating
`flower-menu.tsx` so they mention both files created (`flower-menu.tsx` and
`flower-menu.css`) to match the commands; e.g., change "It will create a new
file `flower-menu.tsx`" to "It will create two new files, `flower-menu.tsx` and
`flower-menu.css`" and make the same edit in the other occurrence to keep the
manual text consistent with the co-located CSS migration.
---
Nitpick comments:
In `@content/docs/button/ripple-button.mdx`:
- Line 21: Update the sentence to use plural and list both created files: change
"It will create a new file called `ripple-button.tsx` inside the
`compoents/animata/button` directory." to something like "It will create new
files `ripple-button.tsx` and `ripple-button.css` inside the
`components/animata/button` directory." — reference the filenames
`ripple-button.tsx`, `ripple-button.css` and the directory name
`components/animata/button`.
In `@content/docs/card/card-spread.mdx`:
- Line 21: The sentence currently states it will create "a new file
`card-spread.tsx`" but the generator actually creates two files; update the
wording to plural and list both files so it's accurate: change the phrase to
something like "It will create new files `card-spread.tsx` and `card-spread.css`
inside the `components/animata/card` directory" ensuring you reference both
filenames (`card-spread.tsx`, `card-spread.css`) and keep directory
`components/animata/card`.
In `@content/docs/card/collab-card.mdx`:
- Line 25: Update the sentence that currently reads "This creates
`collab-card.tsx` in `components/animata/card`" to list both generated files;
change it to something like "This creates `collab-card.tsx` and
`collab-card.css` in `components/animata/card`" so it accurately reflects that
both the .tsx and .css files are created (referencing the filenames
`collab-card.tsx`, `collab-card.css` and the folder `components/animata/card`).
🪄 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: f89dbb16-5049-4dea-b439-efdd263f18f7
📒 Files selected for processing (97)
.gitignoreCLAUDE.mdanimata/background/animated-beam.cssanimata/background/animated-beam.tsxanimata/background/shooting-stars.cssanimata/background/shooting-stars.tsxanimata/button/algolia-blue-button.cssanimata/button/algolia-blue-button.tsxanimata/button/algolia-white-button.cssanimata/button/algolia-white-button.tsxanimata/button/ripple-button.cssanimata/button/ripple-button.tsxanimata/card/card-spread.cssanimata/card/card-spread.tsxanimata/card/collab-card.cssanimata/card/collab-card.tsxanimata/container/animated-border-trail.cssanimata/container/animated-border-trail.tsxanimata/container/marquee.cssanimata/container/marquee.tsxanimata/fabs/flower-menu.cssanimata/fabs/flower-menu.tsxanimata/fabs/speed-dial.cssanimata/fabs/speed-dial.tsxanimata/feature-cards/content-scan.cssanimata/feature-cards/content-scan.tsxanimata/preloader/split-reveal.cssanimata/preloader/split-reveal.tsxanimata/scroll/stacked-sections.cssanimata/scroll/stacked-sections.tsxanimata/skeleton/category-skeleton.tsxanimata/text/blur-out-up.stories.tsxanimata/text/bottom-up-letters.stories.tsxanimata/text/fade-through.stories.tsxanimata/text/focus-blur-resolve.stories.tsxanimata/text/kinetic-center-build.stories.tsxanimata/text/line-by-line-slide.stories.tsxanimata/text/mask-reveal-up.stories.tsxanimata/text/micro-scale-fade.stories.tsxanimata/text/per-character-rise.stories.tsxanimata/text/per-word-crossfade.stories.tsxanimata/text/scale-down-fade.stories.tsxanimata/text/shared-axis-y.stories.tsxanimata/text/shared-axis-z.stories.tsxanimata/text/shimmer-sweep.stories.tsxanimata/text/short-slide-down.stories.tsxanimata/text/short-slide-right.stories.tsxanimata/text/soft-blur-in.stories.tsxanimata/text/spring-scale-in.stories.tsxanimata/text/text-animator-demo.cssanimata/text/text-animator-demo.tsanimata/text/text-animator-preset.stories-shared.tsanimata/text/text-animator.cssanimata/text/text-animator.tsxanimata/text/top-down-letters.stories.tsxapp/(main)/components/page.tsxapp/(main)/page.tsxcomponents/component-list-item.tsxcomponents/mdx-components.tsxcomponents/sidebar-nav.tsxcomponents/text-animator-list-demo.tsxcontent/docs/background/animated-beam.mdxcontent/docs/background/shooting-stars.mdxcontent/docs/button/algolia-blue-button.mdxcontent/docs/button/algolia-white-button.mdxcontent/docs/button/ripple-button.mdxcontent/docs/card/card-spread.mdxcontent/docs/card/collab-card.mdxcontent/docs/container/animated-border-trail.mdxcontent/docs/container/marquee.mdxcontent/docs/contributing/guidelines.mdxcontent/docs/fabs/flower-menu.mdxcontent/docs/fabs/speed-dial.mdxcontent/docs/preloader/split-reveal.mdxcontent/docs/scroll/stacked-sections.mdxcontent/docs/text/blur-out-up.mdxcontent/docs/text/bottom-up-letters.mdxcontent/docs/text/fade-through.mdxcontent/docs/text/focus-blur-resolve.mdxcontent/docs/text/index.mdxcontent/docs/text/kinetic-center-build.mdxcontent/docs/text/line-by-line-slide.mdxcontent/docs/text/mask-reveal-up.mdxcontent/docs/text/micro-scale-fade.mdxcontent/docs/text/per-character-rise.mdxcontent/docs/text/per-word-crossfade.mdxcontent/docs/text/scale-down-fade.mdxcontent/docs/text/shared-axis-y.mdxcontent/docs/text/shared-axis-z.mdxcontent/docs/text/shimmer-sweep.mdxcontent/docs/text/short-slide-down.mdxcontent/docs/text/short-slide-right.mdxcontent/docs/text/soft-blur-in.mdxcontent/docs/text/spring-scale-in.mdxcontent/docs/text/top-down-letters.mdxscripts/build-registry.jsstyles/globals.css
Correct Algolia label typo, use brand highlight tokens in content-scan, and align manual install prose with two-file touch commands. Co-authored-by: Cursor <cursoragent@cursor.com>
hari
approved these changes
Jun 11, 2026
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
Refactor
New Features
Documentation
Chores