styles(website): add InView animations

Author: halvaradop

app/src/app/layout.tsx

@@ -49,7 +49,6 @@ export default function RootLayout({ children }: LayoutProps) {
                 <Header />
                 {children}
                 <Footer />
-                <Cursor />
             </body>
         </html>
     )

app/src/hooks/use-mouse-position.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from "react"
+
+export const useMouse = () => {
+    const [isMoving, setIsMoving] = useState(false)
+    const [position, setPosition] = useState({ x: 0, y: 0 })
+
+    useEffect(() => {
+        const handleMouseMove = (event: MouseEvent) => {
+            setPosition({ x: event.clientX, y: event.clientY })
+            setIsMoving(true)
+        }
+
+        const handleMouseLeave = () => {
+            setIsMoving(false)
+        }
+
+        window.addEventListener("mousemove", handleMouseMove)
+        window.addEventListener("mouseleave", handleMouseLeave)
+
+        return () => {
+            window.removeEventListener("mousemove", handleMouseMove)
+            window.removeEventListener("mouseleave", handleMouseLeave)
+        }
+    }, [])
+    return { isMoving, position }
+}

app/src/lib/@types/props.ts

@@ -73,3 +73,8 @@ export interface TextScrambleProps {
     as?: React.ElementType
     characterSet?: string
 }
+
+export interface SegmentAnimationProps {
+    title: string
+    description: string
+}

app/src/lib/content.ts

@@ -0,0 +1,22 @@
+export const whyChooseUsContent = [
+    {
+        number: "/01",
+        title: "Native",
+        desc: `Our utilities are built using Tailwind’s new API — no legacy plugins, no PostCSS. Just clean, modern extension.`,
+    },
+    {
+        number: "/02",
+        title: "Dynamic Styling",
+        desc: `Use Tailwind’s new syntax like [margin:12px] to update our utility styles inline, without modifying config files.`,
+    },
+    {
+        number: "/03",
+        title: "Variant Support",
+        desc: `Create custom variants easily with our utilities. Built on v4’s JIT engine, you get dynamic variant control out of the box.`,
+    },
+    {
+        number: "/04",
+        title: "Clean Integration",
+        desc: `We follow Tailwind’s core design philosophy — fast builds, atomic classes, and a unified, zero-runtime experience.`,
+    },
+]

app/src/ui/animations/segment.tsx

@@ -0,0 +1,42 @@
+"use client"
+import { useRef } from "react"
+import { useInView, AnimatePresence } from "motion/react"
+import { TextEffect } from "@/ui/text-effect"
+import { SegmentAnimationProps } from "@/lib/@types/props"
+
+export const SegmentAnimation = ({ title, description }: SegmentAnimationProps) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const isView = useInView(containerRef, {
+        once: true,
+        margin: "-100px 0px -100px 0px",
+    })
+
+    return (
+        <div className="py-16 px-4 grid sm:px-6 md:px-8 base:px-10 base:items-center base:grid-cols-2" ref={containerRef}>
+            <AnimatePresence>
+                {isView ? (
+                    <TextEffect
+                        className="mb-6 text-primary text-2xl md:text-fluid-3xl"
+                        as="h2"
+                        preset="fade-in-blur"
+                        speedReveal={1.1}
+                        speedSegment={0.5}
+                    >
+                        {title}
+                    </TextEffect>
+                ) : (
+                    <span className="opacity-0">{title}</span>
+                )}
+            </AnimatePresence>
+            <AnimatePresence>
+                {isView ? (
+                    <TextEffect className="text-muted text-fluid-base" preset="fade-in-blur" speedReveal={1.1} speedSegment={0.5}>
+                        {description}
+                    </TextEffect>
+                ) : (
+                    <span className="opacity-0">{description}</span>
+                )}
+            </AnimatePresence>
+        </div>
+    )
+}

app/src/ui/cursor.tsx

@@ -0,0 +1,18 @@
+"use client"
+import { motion } from "motion/react"
+import { useMouse } from "@/hooks/use-mouse-position"
+
+export const Cursor = () => {
+    const {
+        position: { x, y },
+    } = useMouse()
+
+    return (
+        <motion.span
+            className="size-10 block rounded-full bg-white pointer-events-none mix-blend-difference fixed z-50"
+            animate={{ x, y }}
+            transition={{ type: "spring", stiffness: 300, damping: 30, mass: 0.5 }}
+            style={{ translateX: "-50%", translateY: "-50%" }}
+        />
+    )
+}

app/src/ui/developer-experience.tsx

@@ -1,58 +1,47 @@
+"use client"
+import { useState } from "react"
 import { Separator } from "./separator"
+import { motion } from "motion/react"
+import { SegmentAnimation } from "./animations/segment"
+import { cardVariants } from "./motion/card.motion"
+import { whyChooseUsContent } from "@/lib/content"
 
 export const DeveloperExperienceSection = () => {
+    const [hovered, setHovered] = useState<number | null>(null)
+
     return (
         <section>
             <Separator index={1}>Built for real projects</Separator>
             <section className="min-h-[calc(100dvh-4rem)] mx-10 flex flex-col border-x border-solid border-border base:mx-16 xl:min-h-auto">
-                <div className="py-16 px-4 grid sm:px-6 md:px-8 base:px-10 base:items-center base:grid-cols-2">
-                    <h2 className="mb-6 text-primary text-2xl md:text-fluid-3xl">Why Choose Us</h2>
-                    <p className="text-muted text-fluid-base">
-                        Tailwind CSS v4 brings a modern engine — and our utilities are built for it. We’ve designed every package
-                        to integrate seamlessly using the new configuration API, variant generator, and dynamic styling support.
-                    </p>
-                </div>
+                <SegmentAnimation
+                    title="Why Choose Us"
+                    description="Tailwind CSS v4 brings a modern engine — and our utilities are built for it. We’ve designed every package to integrate seamlessly using the new configuration API, variant generator, and dynamic styling support."
+                />
                 <div className="grid text-primary text-left article:border-t article:border-solid article:border-border lg:flex-100 lg:grid-cols-2 lg:article:border-r lg:article:even:border-r-0 xl:min-h-[30dvw] xl:grid-cols-4 xl:article:nth-[2]:border-r">
-                    <article className="w-full h-full py-14 px-4 flex items-center justify-between gap-x-6 sm:px-6 sm:gap-x-10 md:px-8 md:gap-x-12 base:px-10 base:gap-x-16 lg:flex-col lg:items-start">
-                        <span>/01</span>
-                        <div className="text-left self-end xl:text-right">
-                            <p>Native</p>
-                            <p className="mt-1 text-muted text-sm">
-                                Our utilities are built using Tailwind’s new API — no legacy plugins, no PostCSS. Just clean,
-                                modern extension.
-                            </p>
-                        </div>
-                    </article>
-                    <article className="w-full h-full py-14 px-4 flex items-center justify-between gap-x-6 sm:px-6 sm:gap-x-10 md:px-8 md:gap-x-12 base:px-10 base:gap-x-16 lg:flex-col lg:items-start">
-                        <span>/02</span>
-                        <div className="text-left self-end xl:text-right">
-                            <p>Dynamic Styling</p>
-                            <p className="mt-1 text-muted text-sm">
-                                Use Tailwind’s new syntax like `[margin:12px]` to update our utility styles inline, without
-                                modifying config files.
-                            </p>
-                        </div>
-                    </article>
-                    <article className="w-full h-full py-14 px-4 flex items-center justify-between gap-x-6 sm:px-6 sm:gap-x-10 md:px-8 md:gap-x-12 base:px-10 base:gap-x-16 lg:flex-col lg:items-start">
-                        <span>/03</span>
-                        <div className="text-left self-end xl:text-right">
-                            <p>Variant Support</p>
-                            <p className="mt-1 text-muted text-sm">
-                                Create custom variants easily with our utilities. Built on v4’s JIT engine, you get dynamic
-                                variant control out of the box.
-                            </p>
-                        </div>
-                    </article>
-                    <article className="w-full h-full py-14 px-4 flex items-center justify-between gap-x-6 sm:px-6 sm:gap-x-10 md:px-8 md:gap-x-12 base:px-10 base:gap-x-16 lg:flex-col lg:items-start">
-                        <span>/04</span>
-                        <div className="text-left self-end xl:text-right">
-                            <p>Clean Integration</p>
-                            <p className="mt-1 text-muted text-sm">
-                                We follow Tailwind’s core design philosophy — fast builds, atomic classes, and a unified,
-                                zero-runtime experience.
-                            </p>
-                        </div>
-                    </article>
+                    {whyChooseUsContent.map((item, idx) => (
+                        <motion.article
+                            key={item.number}
+                            className="group w-full h-full py-14 px-4 flex items-center justify-between gap-x-6 relative z-10 overflow-hidden sm:px-6 sm:gap-x-10 md:px-8 md:gap-x-12 base:px-10 base:gap-x-16 lg:flex-col lg:items-start hover:bg-surface hover:cursor-pointer"
+                            onMouseEnter={() => setHovered(idx)}
+                            onMouseLeave={() => setHovered(null)}
+                            transition={cardVariants}
+                        >
+                            <span>{item.number}</span>
+                            <div className="text-left self-end xl:text-right overflow-hidden">
+                                <p className="text-lg font-medium group-hover:text-primary">{item.title}</p>
+                                <motion.p
+                                    className="mt-1 text-muted overflow-hidden group-hover:text-primary"
+                                    animate={
+                                        hovered === idx ? { opacity: 1, y: 0, height: "auto" } : { opacity: 0, y: 20, height: 0 }
+                                    }
+                                    initial={{ opacity: 0, y: 20, height: 0 }}
+                                    transition={{ duration: 0.4, ease: [0.4, 0, 0.2, 1] }}
+                                >
+                                    {item.desc}
+                                </motion.p>
+                            </div>
+                        </motion.article>
+                    ))}
                 </div>
             </section>
         </section>

app/src/ui/docs.tsx

@@ -6,7 +6,7 @@ export const DocsSection = () => {
     return (
         <section>
             <Separator index={4}>Start Building</Separator>
-            <div className="mx-10 py-16 px-4 flex items-center justify-center flex-col text-center border-x border-solid border-border sm:px-6 md:px-8  base:mx-16 base:px-10">
+            <div className="min-h-[50dvh] mx-10 py-16 px-4 flex items-center justify-center flex-col text-center border-x border-solid border-border sm:px-6 md:px-8  base:mx-16 base:px-10">
                 <h2 className="text-primary text-2xl md:text-fluid-3xl">Explore the Docs</h2>
                 <p className="mt-6 mb-8 text-muted text-fluid-base">
                     Get everything you need to start building with our utilities — from installation to deep usage examples.

app/src/ui/footer.tsx

@@ -10,14 +10,14 @@ export const Footer = () => {
         <footer>
             <Separator index={4}>Stay connected</Separator>
             <section className="mx-10 text-primary border-x border-solid border-border base:grid md:grid-cols-2 base:mx-16">
-                <h2 className="py-16 px-4 text-fluid-xl text-center border-b border-solid border-border sm:px-6 md:px-8 base:px-10 base:col-span-2">
+                <h2 className="py-16 px-4 text-fluid-xl text-center border-b border-solid border-border sm:px-6 md:px-8 base:px-10 base:col-span-2 hover:bg-surface">
                     @halvaradop/tailwindcss
                 </h2>
-                <p className="py-16 px-4 border-b border-border sm:px-6 md:px-8 base:px-10">
+                <p className="py-16 px-4 border-b border-border sm:px-6 md:px-8 base:px-10 hover:bg-surface">
                     An open-source toolkit that brings missing utility classes to Tailwind CSS. Built to simplify your setup and
                     boost productivity — with minimal configuration.
                 </p>
-                <div className="py-16 px-4 flex justify-evenly gap-10 text-muted text-sm font-medium border-b border-solid border-border sm:px-6 md:px-8 base:px-10 base:row-span-2 base:justify-around base:border-b-0 base:border-l">
+                <div className="py-16 px-4 flex justify-evenly gap-10 text-muted text-sm font-medium border-b border-solid border-border hover:bg-surface sm:px-6 md:px-8 base:px-10 base:row-span-2 base:justify-around base:border-b-0 base:border-l">
                     <ul className="text-left space-y-4 li:hover:text-primary">
                         <li className="text-primary text-lg font-semibold">Product</li>
                         <li>
@@ -47,7 +47,7 @@ export const Footer = () => {
                         </li>
                     </ul>
                 </div>
-                <div className="grid grid-cols-3">
+                <div className="grid grid-cols-3 figure:hover:bg-surface">
                     <figure className="py-10 grid place-content-center md:py-16">
                         <Image src={githubLogo} alt="Github Logo" />
                     </figure>
@@ -60,7 +60,7 @@ export const Footer = () => {
                 </div>
             </section>
             <Separator index={5} rotate>
-                <span className="mx-auto">&#169; 2025 halvaradop</span>
+                <span className="mx-auto">&#169; 2025 halvaradop.</span>
             </Separator>
         </footer>
     )

app/src/ui/globals.css

@@ -20,7 +20,7 @@ It is generating errors to load animations styles
     --color-success: oklch(75% 0.18 140);
     --color-danger: oklch(65% 0.2 25);
 
-    --color-surface: oklch(98% 0 0);
+    --color-surface: #0a0a0b;
     --color-on-surface: oklch(20% 0.02 260);
 
     --color-primary: #f7f8f8;