sashaastiadi/www_maison_noire
1
0
Fork 0
forked from veda/www_veda_2025
Code Pull Requests Activity

feat: add typewriter animation effect to hero text

Browse Source 
- Added typewriter-effect package for animated text rendering
- Implemented sequential typing animation for welcome message and signature
- Added client-side rendering check to prevent hydration issues
- Adjusted text opacity and timing delays for better readability
- Created invisible placeholder text to maintain layout during animation loading
This commit is contained in:
sasha-astiadi
2025-10-24 05:06:16 +02:00
parent c3bb18d495
commit a6a0bbef0b
4 changed files with 96 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
package-lock.json generated
View File

@@ -31,7 +31,8 @@
"react-use-measure": "^2.1.7",
"slick-carousel": "^1.8.1",
"swiper": "^11.1.7",
"tailwindcss": "^3.4.6"
"tailwindcss": "^3.4.6",
"typewriter-effect": "^2.22.0"
},
"devDependencies": {
"eslint": "^8.56.0",
@@ -27468,6 +27469,20 @@
"node": ">=4.2.0"
}
},
"node_modules/typewriter-effect": {
"version": "2.22.0",
"resolved": "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.22.0.tgz",
"integrity": "sha512-01HCRYY462wT8Fxps/epwGCioZd/GMXY0aLKhFKrfJ5Xhgf54/SiDx7Oq7PoES5kGqOEAdW8FS8HYVM2WSvfhQ==",
"license": "MIT",
"dependencies": {
"prop-types": "^15.8.1",
"raf": "^3.4.1"
},
"peerDependencies": {
"react": ">=17.0.0",
"react-dom": ">=17.0.0"
}
},
"node_modules/unbox-primitive": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",

3
package.json
View File

@@ -33,7 +33,8 @@
"react-use-measure": "^2.1.7",
"slick-carousel": "^1.8.1",
"swiper": "^11.1.7",
"tailwindcss": "^3.4.6"
"tailwindcss": "^3.4.6",
"typewriter-effect": "^2.22.0"
},
"devDependencies": {
"eslint": "^8.56.0",

76
src/components/Hero.jsx
View File

@@ -1,9 +1,19 @@
'use client'
import Image from 'next/image'
import { useState, useEffect } from 'react'
import Typewriter from 'typewriter-effect'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
import BgNoise from '@/components/BgNoise'
export function Hero() {
const [isClient, setIsClient] = useState(false)
useEffect(() => {
setIsClient(true)
}, [])
return (
<>
<div className="relative -mt-20 min-h-screen">
@@ -37,18 +47,68 @@ export function Hero() {
<div className="relative">
<div
className="bg-cover bg-center -mt-14"
style={{ backgroundImage: 'url(/images/paper.jpg)' }}
style={{ backgroundImage: 'url(/images/paper.jpg)', opacity: '0.9' }}
>
<div className="px-6 py-24 lg:px-8">
<div className="mx-auto max-w-2xl text-left">
<p className="font-script text-2xl text-love-red mb-2 font-typewriter">Mon cher,</p>
<p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed">
If you find yourself here, you’ve survived the noise.<br />
Sit, let the glass sweat a little.<br />
The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />
If not, the night still owes you a dance.
<p className="font-script text-2xl text-love-red mb-2 font-typewriter relative">
<span className="invisible">Mon cher,</span>
{isClient && (
<span className="absolute top-0 left-0">
<Typewriter
options={{
delay: 75,
}}
onInit={(typewriter) => {
typewriter.typeString('Mon cher,').start()
}}
/>
</span>
)}
</p>
<p className="font-typewriter text-xl max-w-2xl mx-auto leading-relaxed relative">
<span className="invisible" dangerouslySetInnerHTML={{ __html: 'If you find yourself here, you’ve survived the noise.<br />Sit, let the glass sweat a little.<br />The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />If not, the night still owes you a dance.' }} />
{isClient && (
<span className="absolute top-0 left-0">
<Typewriter
options={{
delay: 50,
}}
onInit={(typewriter) => {
typewriter
.pauseFor(2000)
.typeString(
'If you find yourself here, you’ve survived the noise.<br />',
)
.pauseFor(500)
.typeString('Sit, let the glass sweat a little.<br />')
.pauseFor(500)
.typeString(
'The band will start soon, and perhaps someone will meet your eyes before the chorus ends.<br />',
)
.pauseFor(500)
.typeString('If not, the night still owes you a dance.')
.start()
}}
/>
</span>
)}
</p>
<p className="font-script text-xl text-love-red mt-6 font-typewriter relative">
<span className="invisible">— M.N.</span>
{isClient && (
<span className="absolute top-0 left-0">
<Typewriter
onInit={(typewriter) => {
typewriter
.pauseFor(17000)
.typeString('— M.N.')
.start()
}}
/>
</span>
)}
</p>
<p className="font-script text-xl text-love-red mt-6 font-typewriter">— M.N.</p>
</div>
</div>
</div>

12
yarn.lock
View File

@@ -11064,7 +11064,7 @@ react-dev-utils@^11.0.3:
strip-ansi "6.0.0"
text-table "0.2.0"
react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0:
react-dom@*, "react-dom@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react-dom@^16.8.0 || ^17.0.0 || ^18.0.0", "react-dom@^17.0.0 || ^18.0.0 || ^19.0.0", react-dom@^18, "react-dom@^18.0.0 || ^19.0.0", react-dom@^18.2.0, react-dom@>=16, react-dom@>=16.13, react-dom@>=16.6.0, react-dom@>=16.8.0, react-dom@>=17.0.0:
version "18.3.1"
resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz"
integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
@@ -11208,7 +11208,7 @@ react-use-measure@^2.1.7:
resolved "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz"
integrity sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==
react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.13, react@>=16.6.0, react@>=16.8.0:
react@*, "react@^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0 || ^18.0.0", "react@^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0", "react@^17.0.0 || ^18.0.0 || ^19.0.0", react@^18, "react@^18.0.0 || ^19.0.0", react@^18.2.0, react@^18.3.1, "react@>= 16", "react@>= 16.8.0 || 17.x.x || ^18.0.0-0", react@>=16, react@>=16.13, react@>=16.6.0, react@>=16.8.0, react@>=17.0.0:
version "18.3.1"
resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
@@ -13182,6 +13182,14 @@ typedarray@^0.0.6:
resolved "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz"
integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
typewriter-effect@^2.22.0:
version "2.22.0"
resolved "https://registry.npmjs.org/typewriter-effect/-/typewriter-effect-2.22.0.tgz"
integrity sha512-01HCRYY462wT8Fxps/epwGCioZd/GMXY0aLKhFKrfJ5Xhgf54/SiDx7Oq7PoES5kGqOEAdW8FS8HYVM2WSvfhQ==
dependencies:
prop-types "^15.8.1"
raf "^3.4.1"
unbox-primitive@^1.0.2:
version "1.0.2"
resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"