-
-
Save zenkodr/19ddcf395bdc9dde90a742c60f25e1d5 to your computer and use it in GitHub Desktop.
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
| @tailwind base; | |
| @tailwind components; | |
| @tailwind utilities; | |
| .masked-text { | |
| background-image: url('/robot.jpg'); | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-repeat: no-repeat; | |
| background-position: center; | |
| background-size: cover; | |
| } | |
| /* Add this to your global styles */ | |
| @keyframes zoom-out { | |
| from { transform: scale(10); } | |
| to { transform: scale(1); } | |
| } | |
| .masked-text { | |
| background-image: url('/robot.jpg'); | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| animation: zoom-out 2s forwards; | |
| } | |
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
| "use client" | |
| import React from 'react'; | |
| const Home = () => { | |
| return ( | |
| <div className="w-screen min-h-screen bg-black flex items-center justify-center relative overflow-hidden"> | |
| <div className="absolute inset-0 z-10"> | |
| {/* <img src="/robot.jpg" alt="Background" className="w-full h-full object-cover" /> */} | |
| </div> | |
| <div className="relative z-20 space-x-2"> | |
| {['Z', 'A', 'A', 'V', 'G'].map((letter, index) => ( | |
| <div key={index} className={`inline-block transform scale-${100-index*10}`} style={{ animationDelay: `${index * 0.2}s` }}> | |
| <h1 className="text-[300px] animate-zoom-out font-bold masked-text">{letter}</h1> | |
| </div> | |
| ))} | |
| </div> | |
| </div> | |
| ); | |
| }; | |
| export default Home; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment