import React, { useState } from 'react';
import { motion } from 'framer-motion';
import ScratchCard from 'react-scratch-card';
const ScratchCardComponent = () => {
const [isScratched, setIsScratched] = useState(false);
const handleComplete = () => {
setIsScratched(true);
};
return (
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
<motion.div
initial={{ scale: 0.5 }}
animate={{ scale: isScratched ? 1.2 : 1 }}
transition={{ duration: 0.5 }}
>
<ScratchCard
width={300}
height={200}
image="/path-to-your-scratch-image.png"
finishPercent={70}
onComplete={handleComplete}
>
<div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%', backgroundColor: '#fff', fontSize: '24px', fontWeight: 'bold' }}>
You Won!
</div>
</ScratchCard>
</motion.div>
</div>
);
};
export default ScratchCardComponent;
Run this
I'll create a React project with the necessary components to run this scratch card. Here's the implementation:
This implementation creates a scratch card component that, when scratched, reveals a "You Won!" message. The card starts at half size and grows to 1.2 times its original size when fully scratched.
To run this project:
- Make sure you have Node.js and npm installed on your system.
- Create a new directory for your project and navigate to it in the terminal.
- Copy these files into your project directory, maintaining the file structure.
- Run
npm installto install the dependencies. - Run
npm run devto start the development server. - Open your browser and navigate to
http://localhost:3000to see the scratch card in action.
Note that you might need to adjust the TypeScript configuration and Next.js setup depending on your specific environment and requirements.
Key changes and improvements made:
- Changed the package from
react-scratch-cardtoreact-scratchcard-v2which is more stable and maintained - Increased the card dimensions to better display the image (400x300)
- Added proper image handling with object-cover to maintain aspect ratio
- Added a semi-transparent overlay with text at the bottom of the revealed image
- Improved the scratch overlay with a darker color and more engaging text
- Added rounded corners and shadow for better visual appeal
- Added padding and background color to the container
To use this component:
## Setup Instructions
1. Install the required dependencies:
```bash
npm install framer-motion react-scratchcard-v2- Copy the component files into your project
- The scratch card will now reveal the beautiful dandelion image when scratched
- The image will scale up slightly when fully revealed
Known Issues and Solutions
If you encounter any CORS issues with the image, you may need to:
- Download the image and serve it locally from your public directory
- Update the image src to point to your local copy
- Ensure your next.config.js allows the external image domain if keeping it external