mbcubeconsulting/cachetdeco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

switch up animation
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 27s
Details

Browse Source
This commit is contained in:
mouad bouras
2026-03-26 16:43:22 -04:00
parent b0f2bf142b
commit cd3cb704be
1 changed files with 14 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/ui/hero.tsx
View File

@@ -74,35 +74,41 @@ export default function Hero({ content }: { content: HeroContent }) {
<div className="relative rounded-lg px-6 py-2"> <div className="relative rounded-lg px-6 py-2">
<motion.div <motion.div
className="absolute inset-0 rounded-lg bg-brand-50" className="absolute inset-0 rounded-lg bg-brand-50"
initial={{ opacity: 0 }} initial={{ opacity: 0, scaleY: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1, scaleY: 1 }}
transition={{ delay: 0.85, duration: 2, ease: [0.22, 1, 0.36, 1] }} style={{ originY: "50%" }}
transition={{ delay: 0.85, duration: 1, ease: [0.22, 1, 0.36, 1] }}
/> />
<svg className="relative" viewBox="0 0 1390 500" xmlns="http://www.w3.org/2000/svg"> <svg className="relative" viewBox="0 0 1390 500" xmlns="http://www.w3.org/2000/svg">
<defs> <defs>
<clipPath id="cachet-rise-clip"> <clipPath id="cachet-rise-clip">
<motion.rect <motion.rect
x="0" x="0"
initial={{ y: 334, height: 0 }} initial={{ scaleY: 0 }}
animate={{ y: 0, height: 334 }} animate={{ scaleY: 1 }}
style={{ originY: "100%" }}
transition={{ transition={{
duration: 1, duration: 1,
ease: [0.22, 1, 0.36, 1], ease: [0.22, 1, 0.36, 1],
delay: 0.85, delay: 0.85,
}} }}
height="334"
width="1390" width="1390"
/> />
</clipPath> </clipPath>
<clipPath id="decorateurs-drop-clip"> <clipPath id="decorateurs-drop-clip">
<motion.rect <motion.rect
x="0" x="0"
initial={{ y: 334, height: 0 }} y="334"
animate={{ y: 334, height: 166 }} initial={{ scaleY: 0 }}
animate={{ scaleY: 1 }}
style={{ originY: "0%" }}
transition={{ transition={{
duration: 1, duration: 1,
ease: [0.22, 1, 0.36, 1], ease: [0.22, 1, 0.36, 1],
delay: 0.85, delay: .95,
}} }}
height="166"
width="1390" width="1390"
/> />
</clipPath> </clipPath>