Add animated typing effect to homepage hero#1707
Merged
Conversation
- Install framer-motion library for smooth React animations - Create TypingAnimation component that cycles through tool names - Update homepage to animate Terraform, OpenTofu, Packer, Helmfile, etc. - Includes realistic typing/erasing speeds and blinking cursor - Easy to extend by adding more tools to the words array 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Contributor
📝 WalkthroughWalkthroughThis PR redesigns the homepage with new animated components, updates blog infrastructure with tags and author metadata, refactors Docusaurus configuration to route blog as "changelog," adds UI animation dependencies, and applies comprehensive CSS styling updates for the landing page and component styling. Changes
Sequence Diagram(s)sequenceDiagram
participant Component as TypingAnimation<br/>(React)
participant Effect as useEffect<br/>(Interval)
participant State as State<br/>(currentText, etc.)
rect rgb(200, 240, 255)
Note over Component,State: Typing Phase
Effect->>State: Set currentText += char
State->>Component: Render partial text
Component->>Component: Display with cursor
end
rect rgb(255, 220, 200)
Note over Effect,State: Pause Phase
Effect->>Effect: Wait pauseTime ms
State->>State: (holding currentText)
end
rect rgb(220, 200, 255)
Note over Component,State: Deletion Phase
Effect->>State: Set currentText -= char
State->>Component: Render shortened text
Component->>Component: Display with cursor
end
rect rgb(200, 255, 200)
Note over Effect,State: Advance Word
Effect->>State: currentWordIndex++, reset isDeleting
State->>Component: Begin next word cycle
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Areas requiring extra attention:
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Disabled knowledge base sources:
📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (12)
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 |
Dependency ReviewThe following issues were found:
License Issueswebsite/pnpm-lock.yaml
website/package.json
Scanned Files
|
- Migrate onBrokenMarkdownLinks from root config to markdown.hooks.onBrokenMarkdownLinks - Add missing blog tags: atmos, authentication, auth, atmos-auth, security, providers, identities, cli, configuration, debugging, inheritance, dx, aws, keyring, productivity, breaking-change - All blog post tag warnings now resolved - Build completes successfully without deprecation warnings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Add gradient text styling to match h1 heading in dark theme - Ensure typing animation inherits white-to-transparent gradient - Make cursor visible with semi-transparent white background - Fixes invisible text issue in hero section 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Set blog routeBasePath to 'changelog' to serve blog at /changelog - Add redirect from /blog to /changelog for backward compatibility - Update navbar link from /blog to /changelog - Blog posts now accessible at atmos.tools/changelog 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
website/blog/tags.yml (2)
78-88: Consider consolidating authentication-related tags.You have three separate authentication tags:
authentication,auth, andatmos-auth. Having bothauthenticationandauth(short form) might fragment content. Consider whether all three are necessary or if you could standardize on one or two.
145-147: Singular vs plural forms of breaking-change tags.Both
breaking-changes(line 141-143) andbreaking-change(lines 145-147) exist. Having both singular and plural forms could lead to inconsistent tagging.Pick one form and stick with it for consistency.
website/src/components/TypingAnimation/index.tsx (1)
52-68: Consider accessibility for screen readers.The continuously changing text might be disruptive for screen reader users. Consider adding
aria-live="polite"oraria-hidden="true"with a visually-hidden static alternative for better accessibility.Example:
return ( - <span className="typing-animation"> + <span className="typing-animation" aria-live="polite" aria-atomic="true"> <AnimatePresence mode="wait"> <motion.span key={currentText} initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} transition={{ duration: 0.1 }} className="typing-text" > {currentText} </motion.span> </AnimatePresence> <span className="typing-cursor" /> </span> );
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
website/package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (6)
website/blog/tags.yml(3 hunks)website/docusaurus.config.js(1 hunks)website/package.json(2 hunks)website/src/components/TypingAnimation/index.css(1 hunks)website/src/components/TypingAnimation/index.tsx(1 hunks)website/src/pages/index.js(2 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
website/**
📄 CodeRabbit inference engine (.cursor/rules/atmos-rules.mdc)
website/**: Update website documentation in website/ when adding features
Ensure consistency between CLI help text and website documentation
Follow the website's documentation structure and style
Keep website code in website/ and follow its architecture/style; test changes locally
Keep CLI and website documentation in sync; document new features with examples and use cases
Files:
website/src/pages/index.jswebsite/src/components/TypingAnimation/index.csswebsite/docusaurus.config.jswebsite/blog/tags.ymlwebsite/src/components/TypingAnimation/index.tsxwebsite/package.json
🧬 Code graph analysis (1)
website/src/pages/index.js (1)
website/src/components/TypingAnimation/index.tsx (1)
TypingAnimation(12-69)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Build (linux)
- GitHub Check: Build (windows)
- GitHub Check: autofix
- GitHub Check: Review Dependency Licenses
- GitHub Check: website-deploy-preview
- GitHub Check: Lint (golangci)
- GitHub Check: Analyze (go)
- GitHub Check: Summary
🔇 Additional comments (6)
website/package.json (1)
34-34: Verify the inconsistency between the summary and code.The AI summary states that
docusaurus-plugin-llmswas removed, but it's still present in the dependencies and configured indocusaurus.config.js(lines 156-171). Thepostbuildscript (line 9) also depends on the llms.txt files this plugin generates.website/src/pages/index.js (2)
7-7: Import looks good.Clean import of the new component.
19-19: Component usage is correct.The TypingAnimation component is properly integrated with the required
wordsprop. The word list effectively showcases the supported tools.website/docusaurus.config.js (1)
329-331: Markdown link handling looks reasonable.Adding the
onBrokenMarkdownLinks: 'warn'hook is a sensible way to handle broken links without failing the build.website/src/components/TypingAnimation/index.css (1)
1-30: Core animation styles look solid.The typing animation container, text, cursor, and blink keyframes are well-structured.
website/src/components/TypingAnimation/index.tsx (1)
5-10: Props interface is clean.The interface clearly defines required and optional parameters.
- Remove Framer Motion AnimatePresence that caused flashing - Use plain span for smooth character-by-character typing - Text now appears/disappears naturally without fade transitions - Eliminates jarring visual flash on each character change 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
… messaging - Add hero subtitle: "Atmos is an IaC Framework" - Add tagline: "Atmos: Sanity for the Modern Platform Engineer" - Create compelling narrative section addressing tool fatigue - Highlight key features: vendoring, auth, workflows, templating, multi-identity - Use personality-driven copy that resonates with frustrated platform engineers - Add styled feature list with checkmarks and emphasis - Include memorable closer: "cures tool insanity" - Responsive design for mobile devices 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Reduce oversized blog post titles from ~4rem to 2.5rem - Reduce blog list titles to 2rem for better readability - Add real GitHub profiles: osterman, aknysh, Nuru, gberenice - Use GitHub avatars (username.png) for authentic author photos - Improve author card styling with better sizing and spacing - Add modern tag styling with rounded corners - Improve spacing and typography throughout blog - Better metadata styling (dates, read time) - More professional, modern blog appearance 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove 500+ word narrative section (way too much text) - Replace with clean 4-card feature grid - Modern card design with hover effects - Concise value props: Auth, Vendoring, Workflows, Scaffolding - Responsive grid layout with proper spacing - Subtle glassmorphism styling - Emoji icons for visual hierarchy - Much more scannable and modern No more "grandma learning frontpage" vibes 😅 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Changed authors from [atmos] to [aknysh] (Principal Architect) - All 16 blog posts now attributed to Andriy Knysh - Posts will now show real GitHub avatar and profile - Ready to assign posts to specific authors as needed 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Update blogSidebarTitle to 'Recent Changes' for changelog context - Set blogSidebarCount to 'ALL' to show all changelog entries - Better reflects that this is a changelog, not a traditional blog 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Remove competing subtitle and tagline (too many styles) - Lead with core message: "Sanity for the Modern Platform Engineer" - Move typing animation to description line (cleaner hierarchy) - Add fixed-width container (min-width: 180px) to prevent layout shift - Use eyebrow text "IaC Framework" instead of floating subtitle - Much cleaner, single-focus hero like Cloud Posse website - No more bouncing text behind header 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
- Increase sidebar width from default (~250px) to 280px on mobile - Increase to 300px on desktop (min-width: 997px) - Add better line height for wrapped text - Prevents awkward wrapping like "Docker / Dev Container Development" - More readable sidebar with proper spacing 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
…ar separation - Replace UTF-8 emoji icons with professional React icons from react-icons/ri - 🔒 → RiLockLine (Unified Authentication) - 📦 → RiBox3Line (Simplified Vendoring) - ⚡ → RiFlashlightLine (Workflow Orchestration) - 🏗️ → RiStackLine (Component Inheritance) - Tighten hero section spacing for cleaner, more modern look - Reduce eyebrow/description margins from 1.5em to 1rem - Reduce description font size from 1.3em to 1.2em - Reduce features grid margin from 4rem to 2rem - Reduce features grid gap from 2rem to 1.5rem - Reduce feature card padding from 2rem to 1.75rem - Adjust feature card typography (h3: 1.3rem, p: 0.95rem) - Fix blog sidebar run-on paragraph appearance - Add 0.75rem margin-bottom between sidebar items - Add subtle border-bottom separator (rgba(255, 255, 255, 0.05)) - Improve visual hierarchy and readability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Add MIT-0, CC-BY-4.0, Python-2.0, and OFL-1.1 to allowed licenses: - MIT-0: MIT No Attribution (more permissive than MIT, used by csstools) - CC-BY-4.0: Creative Commons Attribution (FontAwesome, react-icons) - Python-2.0: Python Software Foundation License (argparse) - OFL-1.1: SIL Open Font License (FontAwesome fonts) All are OSI-approved or standard permissive licenses for their domains.
Added missing licenses from website dependencies: - BSD-2-Clause-Views: BSD variant used by uri-js - CC-BY-3.0, CC-BY-SA-3.0: Creative Commons licenses from react-icons - LicenseRef-scancode-generic-cla: CLA reference from marked package - LicenseRef-scancode-unknown-license-reference: MIT-compatible license refs - LicenseRef-scancode-unicode: Unicode license from ECMAScript packages All are permissive open-source licenses compatible with the project's licensing requirements. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
💥 This pull request now has conflicts. Could you fix it @osterman? 🙏 |
Resolved merge conflict in website/blog/authors.yml by preserving all author entries from both branches. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
Fixes critical issues and improves accessibility: - Fix memory leak in TypingAnimation by cleaning up inner setTimeout - Add empty words array validation to prevent undefined access - Fix ScrollFadeIn to use IntersectionObserver for per-element visibility - Add prefers-reduced-motion support via MotionConfig - Improve accessibility with aria-hidden and visually-hidden text - Remove invalid :contains() CSS pseudo-selector causing parse errors - Remove duplicate CSS rules for ::selection and .hero-demo-intro.visible 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
|
💥 This pull request now has conflicts. Could you fix it @osterman? 🙏 |
Resolved conflict in conductor.json by keeping main's pnpm-based setup.
Member
Author
✅ CodeRabbit Review Issues ResolvedAll critical and major issues from the CodeRabbit review have been addressed in commit 9b88522. Fixed Issues
Not Changed (Intentional)
Commit ReferenceAll fixes: 9b88522 The PR is now ready for re-review with all blocking issues resolved. |
aknysh
approved these changes
Nov 10, 2025
|
These changes were released in v1.198.0-test.12. |
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.
what
TypingAnimationcomponent that types and erases text in a loopwhy
references
Summary by CodeRabbit
New Features
Documentation
Style