{"id":24905733,"url":"https://github.com/prashantkoirala465/text-scroll-awwawards","last_synced_at":"2026-04-18T02:31:51.926Z","repository":{"id":274973701,"uuid":"924670074","full_name":"prashantkoirala465/Text-Scroll-Awwawards","owner":"prashantkoirala465","description":"A stunning text animation demo inspired by award-winning websites, featuring a smooth scroll-based opacity transition effect. This project demonstrates how to create an engaging text reveal animation that responds to user scroll, similar to effects seen on websites like matvoyce.tv and thirtysixstudio.com.","archived":false,"fork":false,"pushed_at":"2025-01-30T12:59:35.000Z","size":0,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T13:34:56.444Z","etag":null,"topics":["awwwards","framer-motion","gradient-descent","mouse-tracking","nextjs","opacity-control","smooth-scrolling","text"],"latest_commit_sha":null,"homepage":"https://text-scroll-awwawards.vercel.app/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prashantkoirala465.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-30T12:46:07.000Z","updated_at":"2025-01-30T12:59:38.000Z","dependencies_parsed_at":"2025-01-30T13:34:57.791Z","dependency_job_id":"5ba9d11e-f24d-465d-8d17-a1fbe26be4a4","html_url":"https://github.com/prashantkoirala465/Text-Scroll-Awwawards","commit_stats":null,"previous_names":["prashantkoirala465/text-scroll-awwawards"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashantkoirala465%2FText-Scroll-Awwawards","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashantkoirala465%2FText-Scroll-Awwawards/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashantkoirala465%2FText-Scroll-Awwawards/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prashantkoirala465%2FText-Scroll-Awwawards/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prashantkoirala465","download_url":"https://codeload.github.com/prashantkoirala465/Text-Scroll-Awwawards/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245931756,"owners_count":20695958,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["awwwards","framer-motion","gradient-descent","mouse-tracking","nextjs","opacity-control","smooth-scrolling","text"],"created_at":"2025-02-02T00:24:29.752Z","updated_at":"2026-04-18T02:31:51.900Z","avatar_url":"https://github.com/prashantkoirala465.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Text Gradient Scroll Opacity Effect\n\nA stunning text animation demo inspired by award-winning websites, featuring a smooth scroll-based opacity transition effect. This project demonstrates how to create an engaging text reveal animation that responds to user scroll, similar to effects seen on websites like [matvoyce.tv](https://matvoyce.tv/) and [thirtysixstudio.com](https://thirtysixstudio.com/).\n\n## Features\n\n- Smooth text reveal animation on scroll\n- Character-by-character opacity transition\n- Responsive design\n- Custom font integration\n- Performant scroll-based animations using Framer Motion\n- Modern React implementation with Next.js\n\n## Demo Preview\n\nAs you scroll down the page, each character of the text gradually fades in, creating an elegant and engaging visual effect. The animation is precisely controlled by the scroll position, allowing users to control the reveal speed through their scroll behavior.\n\n## Technologies Used\n\n- **Next.js 14.0.3** - React framework for production\n- **React 18** - JavaScript library for building user interfaces\n- **Framer Motion** - Animation library for React\n- **SASS** - CSS preprocessor for styling\n- **Custom Font** - ClashDisplay Bold for typography\n\n## Project Structure\n\n```\nsrc/\n├── app/\n│   ├── globals.css     # Global styles and font declarations\n│   ├── layout.js       # Root layout component\n│   └── page.js         # Main page component with demo text\n├── components/\n│   ├── Character.jsx   # Core animation component\n│   └── style.module.scss # Component-specific styles\n```\n\n## Implementation Details\n\n### Core Animation Logic\n\nThe text animation is implemented through three main components working together:\n\n1. **Paragraph Component**\n   - Splits the text into words\n   - Manages scroll progress tracking\n   - Calculates animation ranges for each word\n\n2. **Word Component**\n   - Splits words into individual characters\n   - Calculates precise animation timing for each character\n\n3. **Char Component**\n   - Handles the actual opacity animation\n   - Uses Framer Motion's useTransform for smooth transitions\n\n### Key Code Snippets\n\n#### Scroll Progress Tracking\n```javascript\nconst { scrollYProgress } = useScroll({\n  target: container,\n  offset: [\"start 0.9\", \"start 0.25\"]\n})\n```\n\n#### Character Animation\n```javascript\nconst opacity = useTransform(progress, range, [0,1])\nreturn (\n  \u003cspan\u003e\n    \u003cspan className={styles.shadow}\u003e{children}\u003c/span\u003e\n    \u003cmotion.span style={{opacity: opacity}}\u003e{children}\u003c/motion.span\u003e\n  \u003c/span\u003e\n)\n```\n\n## Setup Instructions\n\n1. **Clone the repository**\n   ```bash\n   git clone https://github.com/prashantkoirala465/Text-Scroll-Awwawards\n   cd text-scroll-awwawards\n   ```\n\n2. **Install dependencies**\n   ```bash\n   npm install\n   ```\n\n3. **Run the development server**\n   ```bash\n   npm run dev\n   ```\n\n4. **Open in browser**\n   Navigate to [http://localhost:3000](http://localhost:3000)\n\n## Customization\n\n### Modifying the Text\nEdit the paragraph constant in `src/app/page.js`:\n```javascript\nconst paragraph = \"Your custom text here\"\n```\n\n### Adjusting Animation Parameters\n\n1. **Scroll Trigger Points**\n   In `Character.jsx`, modify the offset values:\n   ```javascript\n   offset: [\"start 0.9\", \"start 0.25\"]\n   ```\n\n2. **Text Styling**\n   Update the SCSS variables in `style.module.scss`:\n   ```scss\n   .paragraph {\n     font-size: 60px;  // Adjust text size\n     line-height: 1;   // Modify line height\n     padding: 40px;    // Change padding\n   }\n   ```\n\n### Font Customization\nReplace the font file in `public/` directory and update the font-face declaration in `globals.css`:\n```css\n@font-face {\n  font-family: 'Main';\n  src: url('../../public/YourFont.otf');\n}\n```\n\n## Performance Considerations\n\n- Uses Framer Motion's optimized animation system\n- Implements efficient scroll-based tracking\n- Minimizes re-renders through proper component structure\n- Utilizes CSS modules for scoped styling\n\n## Browser Support\n\n- Chrome (latest)\n- Firefox (latest)\n- Safari (latest)\n- Edge (latest)\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License - see the LICENSE file for details.\n\n## Acknowledgments\n\n- Inspired by award-winning websites on Awwwards\n- Built with modern web technologies\n- Special thanks to the Framer Motion team for their excellent animation library\n\n## Author\n\nPrashant Koirala\nContact: prashantkoirala465@gmail.com\n\n## Support\n\nIf you have any questions or run into issues, please open an issue in the repository.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprashantkoirala465%2Ftext-scroll-awwawards","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprashantkoirala465%2Ftext-scroll-awwawards","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprashantkoirala465%2Ftext-scroll-awwawards/lists"}