Modern Animated Hero Section

RainingLetters: Dynamic Text Scramble & Matrix Rain Effect The RainingLetters component offers a captivating visual experience, combining a "text scramble" effect with a classic "Matrix rain" animation. It creates an engaging and futuristic ambiance, ideal for hero sections, landing pages, or any digital space that aims to convey innovation and a tech-savvy vibe. What It Is: This component creates a full-screen, immersive background where a stream of characters continuously "rains" down the screen. Overlaying this dynamic background is a central title that undergoes a scrambled text animation, cycling through a series of predefined phrases. This blend offers both constant background motion and an intriguing foreground message. Key Features: Full-Screen Matrix Rain Effect: Hundreds of characters (alphabets, numbers, symbols) continuously fall from the top of the screen. Characters randomly change as they loop from bottom to top, creating a true "raining" effect. Dynamic Character Appearance: A select few "active" characters at any given moment become brighter, larger, bolder, and pulse with a glowing green color, mimicking the iconic Matrix digital rain. Other characters remain a subtle grey, adding depth. Text Scramble Title Animation: A prominent, centered title uses a unique "scramble" animation. Words transition smoothly from one phrase to the next, with individual letters appearing to rapidly cycle through random characters before settling on the final letter. The TextScramble class handles this intricate character-by-character animation, offering a sleek and eye-catching way to display messages. Customizable Phrases: The central scrambled title can easily be updated with your own array of messages, making it versatile for different contexts (e.g., brand slogans, key features, or calls to action). Responsive and Performance-Optimized: Designed to fill the entire viewport, adapting seamlessly to various screen sizes. Animations are managed with requestAnimationFrame for smooth performance. Tailwind CSS Integration: Leverages Tailwind CSS for styling, allowing for easy customization of colors, fonts, and sizes. Modern React Hooks: Built using useState, useEffect, useCallback, and useRef for efficient state management and DOM manipulation. Why It's Cool for Devs: This component is a fantastic demonstration of several advanced front-end techniques: Complex UI Animations: Showcases how to create intricate, synchronized animations using pure JavaScript and requestAnimationFrame within a React environment. Class-Based Utility (TextScramble): Provides a clear example of encapsulating animation logic in a reusable class, integrating it smoothly into a functional React component. Dynamic Backgrounds: Illustrates how to build engaging and non-intrusive animated backgrounds that enhance user experience. Performance Considerations: Highlights the use of techniques like willChange CSS property and requestAnimationFrame to ensure smooth animations.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Modern Animated Hero Section to your project and fits it to your theme.

import RainingLetters from "@/components/ui/modern-animated-hero-section";

const Main = () => {
  return <RainingLetters />;
};

export { Main };