From be1cbb1937bb4e4f74ba6c783280e1dbf2cafd48 Mon Sep 17 00:00:00 2001 From: VizoleLabs <165453324+VizoleLabs@users.noreply.github.com> Date: Tue, 9 Apr 2024 12:15:30 +0000 Subject: [PATCH] feat: hero animation --- app/page.tsx | 47 +++++++++++++++++----- components/ImageFilter/FilterableData.tsx | 12 ++++++ public/images/site05.png | Bin 0 -> 306439 bytes public/images/site06.png | Bin 0 -> 302068 bytes 4 files changed, 48 insertions(+), 11 deletions(-) create mode 100644 public/images/site05.png create mode 100644 public/images/site06.png diff --git a/app/page.tsx b/app/page.tsx index db98a07..f543c2d 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -9,6 +9,7 @@ import { TiTick } from "react-icons/ti" import { Glow, GlowCapture } from "@codaworks/react-glow" import ImageFilter from "components/ImageFilter/ImageFilter" import { BsGlobe2, BsAndroid, BsApple, BsHeadsetVr } from "react-icons/bs" +import { motion } from "framer-motion" export default function Web() { const [init, setInit] = useState(false) @@ -17,6 +18,10 @@ export default function Web() { transform: hovered ? "translateX(3px)" : "none", transition: "transform .2s", // Optional: Smooth transition } + const wordVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.9, staggerChildren: 0.1 } }, + } return (
@@ -32,13 +37,33 @@ export default function Web() { >
-

- Experience the next dimension -

-

- Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software - solutions powered by AI. -

+ + {" "} + {"Experience the next dimension".split(" ").map((word, index) => ( + + {word}{" "} + + ))} + + + {"Let us transform your vision into reality with cutting-edge VR/AR experiences and custom software solutions powered by AI." + .split(" ") + .map((word, index) => ( + + {word}{" "} + + ))} +