https://github.com/aritra69/scramble-text

Scrambled Text animation using framer motion
https://github.com/aritra69/scramble-text

featured framer-motion nextjs tailwindcss

Last synced: 1 day ago
JSON representation

Scrambled Text animation using framer motion

• Host: GitHub
• URL: https://github.com/aritra69/scramble-text
• Owner: ARITRA69
• Created: 2023-10-18T08:01:58.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-06T18:11:53.000Z (12 months ago)
• Last Synced: 2024-11-05T15:04:03.845Z (about 2 months ago)
• Topics: featured, framer-motion, nextjs, tailwindcss
• Language: TypeScript
• Homepage: https://scramble-text.vercel.app
• Size: 53.7 KB
• Stars: 2
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Scramble Text

The ScrambleText component is a React component that provides a fun text scrambling effect on hover. It utilizes the framer-motion library for animation and allows for an engaging display of text.

**Live Link:** [https://scramble-text.vercel.app/](https://scramble-text.vercel.app/)

## Features

- **Hover Effect:** The text starts scrambling on hover, creating an engaging effect.

- **Animation:** Smooth animation provided by the framer-motion library.

- **Interaction:** Stops scrambling when the mouse leaves the component area.

## Tech Stack

- NextJS

- Framer Motion

- TailwindCSS

## Getting Started

First, install the node mudules and run the development server:

```bash

npm run dev

# or

yarn dev

```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.