style(hero): add rotating text

Author: coopbri

app/bun.lock

@@ -17,6 +17,7 @@
         "clsx": "^2.1.1",
         "elkjs": "^0.10.0",
         "lucide-react": "^0.514.0",
+        "motion": "^12.16.0",
         "next": "15.3.3",
         "next-themes": "^0.4.6",
         "nuqs": "^2.4.3",
@@ -405,6 +406,8 @@
 
     "fraction.js": ["fraction.js@4.3.7", "", {}, "sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew=="],
 
+    "framer-motion": ["framer-motion@12.16.0", "", { "dependencies": { "motion-dom": "^12.16.0", "motion-utils": "^12.12.1", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-xryrmD4jSBQrS2IkMdcTmiS4aSKckbS7kLDCuhUn9110SQKG1w3zlq1RTqCblewg+ZYe+m3sdtzQA6cRwo5g8Q=="],
+
     "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
 
     "function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
@@ -471,6 +474,12 @@
 
     "monaco-editor": ["monaco-editor@0.52.2", "", {}, "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ=="],
 
+    "motion": ["motion@12.16.0", "", { "dependencies": { "framer-motion": "^12.16.0", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-P3HA83fnPMEGBLfKdD5vDdjH1Aa3wM3jT3+HX3fCVpy/4/lJiqvABajLgZenBu+rzkFzmeaPkvT7ouf9Tq5tVQ=="],
+
+    "motion-dom": ["motion-dom@12.16.0", "", { "dependencies": { "motion-utils": "^12.12.1" } }, "sha512-Z2nGwWrrdH4egLEtgYMCEN4V2qQt1qxlKy/uV7w691ztyA41Q5Rbn0KNGbsNVDZr9E8PD2IOQ3hSccRnB6xWzw=="],
+
+    "motion-utils": ["motion-utils@12.12.1", "", {}, "sha512-f9qiqUHm7hWSLlNW8gS9pisnsN7CRFRD58vNjptKdsqFLpkVnX00TNeD6Q0d27V9KzT7ySFyK1TZ/DShfVOv6w=="],
+
     "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
 
     "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
@@ -615,7 +624,7 @@
 
     "ts-pattern": ["ts-pattern@5.7.1", "", {}, "sha512-EGs8PguQqAAUIcQfK4E9xdXxB6s2GK4sJfT/vcc9V1ELIvC4LH/zXu2t/5fajtv6oiRCxdv7BgtVK3vWgROxag=="],
 
-    "tslib": ["tslib@2.7.0", "", {}, "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="],
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
 
     "typescript": ["typescript@5.8.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ=="],
 
@@ -649,20 +658,12 @@
 
     "zustand": ["zustand@5.0.5", "", { "peerDependencies": { "@types/react": ">=18.0.0", "immer": ">=9.0.6", "react": ">=18.0.0", "use-sync-external-store": ">=1.2.0" }, "optionalPeers": ["@types/react", "immer", "react", "use-sync-external-store"] }, "sha512-mILtRfKW9xM47hqxGIxCv12gXusoY/xTSHBYApXozR0HmQv299whhBeeAcRy+KrPPybzosvJBCOmVjq6x12fCg=="],
 
-    "@emnapi/core/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "@emnapi/runtime/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "@emnapi/wasi-threads/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "@swc/helpers/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "@tybys/wasm-util/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
     "@xyflow/react/zustand": ["zustand@4.5.6", "", { "dependencies": { "use-sync-external-store": "^1.2.2" }, "peerDependencies": { "@types/react": ">=16.8", "immer": ">=9.0.6", "react": ">=16.8" }, "optionalPeers": ["immer"] }, "sha512-ibr/n1hBzLLj5Y+yUcU7dYw8p6WnIVzdJbnX+1YpaScvZVF2ziugqHs+LAmHw4lWO9c/zRj+K1ncgWDQuthEdQ=="],
 
     "anymatch/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
+    "aria-hidden/tslib": ["tslib@2.7.0", "", {}, "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA=="],
+
     "chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
 
     "fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
@@ -675,12 +676,6 @@
 
     "prop-types/react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
 
-    "react-remove-scroll/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "react-remove-scroll-bar/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "react-style-singleton/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
     "readdirp/picomatch": ["picomatch@2.3.1", "", {}, "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA=="],
 
     "string-width-cjs/emoji-regex": ["emoji-regex@8.0.0", "", {}, "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="],
@@ -697,10 +692,6 @@
 
     "tailwindcss/postcss": ["postcss@8.4.30", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-7ZEao1g4kd68l97aWG/etQKPKq07us0ieSZ2TnFDk11i0ZfDW2AwKHYU8qv4MZKqN2fdBfg+7q0ES06UA73C1g=="],
 
-    "use-callback-ref/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
-    "use-sidecar/tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
-
     "wrap-ansi-cjs/ansi-styles": ["ansi-styles@4.3.0", "", { "dependencies": { "color-convert": "^2.0.1" } }, "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg=="],
 
     "wrap-ansi-cjs/string-width": ["string-width@4.2.3", "", { "dependencies": { "emoji-regex": "^8.0.0", "is-fullwidth-code-point": "^3.0.0", "strip-ansi": "^6.0.1" } }, "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g=="],

app/package.json

@@ -32,6 +32,7 @@
     "clsx": "^2.1.1",
     "elkjs": "^0.10.0",
     "lucide-react": "^0.514.0",
+    "motion": "^12.16.0",
     "next": "15.3.3",
     "next-themes": "^0.4.6",
     "nuqs": "^2.4.3",

app/src/app/page.tsx

@@ -7,7 +7,7 @@ import {
   ArrowRightIcon,
 } from "lucide-react";
 
-import { Button } from "components/ui";
+import { Button, RotatingText } from "components/ui";
 import cn from "lib/util/cn";
 
 const features = [
@@ -75,24 +75,29 @@ const HomePage = () => (
           </div>
 
           <div className="space-y-4">
-            <div className="flex h-full items-center justify-center gap-4">
-              <h1 className="bg-gradient-to-r from-primary to-primary/80 bg-clip-text py-2 font-bold text-3xl text-transparent tracking-tighter sm:text-4xl md:text-5xl">
-                Visualize Your Ecosystem{" "}
-              </h1>
+            <RotatingText
+              words={[
+                "Product",
+                "Service",
+                "Team",
+                "Organization",
+                "Project",
+                "Platform",
+              ]}
+              className="py-2"
+            />
 
-              <SparklesIcon className="hidden h-10 w-10 md:flex" />
-            </div>
-
-            <p className="mx-auto max-w-[700px] text-muted-foreground md:text-xl">
-              Transform complex relationships into clear, interactive maps.
+            <p className="mx-auto max-w-[700px] text-muted-foreground md:text-lg">
+              Transform complex business ecosystem relationships into clear,
+              interactive visualizations.
             </p>
           </div>
 
           <div className="mt-8 space-x-4">
             <Link href="/visualizer">
               <Button
                 size="lg"
-                className="gap-2 bg-primary hover:bg-primary/90"
+                className="gap-2 bg-primary hover:bg-primary/90 mt-4"
               >
                 Start Modeling
                 <ArrowRightIcon className="h-4 w-4" />
@@ -111,7 +116,7 @@ const HomePage = () => (
               key={feature.title}
               className={cn(
                 "group relative flex flex-col items-center space-y-4 text-center",
-                "rounded-lg border bg-background p-6 shadow-lg transition-shadow hover:shadow-xl",
+                "rounded-lg border bg-background p-6 shadow-lg transition-shadow hover:shadow-xl"
               )}
             >
               <div className="rounded-full bg-primary/10 p-4 text-primary">

app/src/components/layout/Header/Header.tsx

@@ -10,9 +10,9 @@ import { ThemeToggle } from "components/layout";
  */
 const Header = () => (
   <header className="sticky top-0 z-50 flex w-full items-center justify-between border-b bg-background/30 p-4 backdrop-blur-lg">
-    <Link href="/" className="flex items-center gap-3">
-      <SproutIcon className="h-8 w-8 text-primary" />
-      <h1 className="font-bold text-3xl">Garden</h1>
+    <Link href="/" className="flex items-center gap-2">
+      <SproutIcon className="h-6 w-6 text-primary" />
+      <h1 className="font-bold text-xl">Garden</h1>
     </Link>
 
     <ThemeToggle />

app/src/components/ui/index.ts

@@ -17,7 +17,11 @@ export {
   ChartLegendContent,
   ChartStyle,
 } from "./chart";
-export { Collapsible, CollapsibleTrigger, CollapsibleContent } from "./collapsible";
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from "./collapsible";
 export {
   Dialog,
   DialogPortal,
@@ -31,6 +35,7 @@ export {
   DialogDescription,
 } from "./dialog";
 export { Label } from "./label";
+export { RotatingText } from "./rotating-text";
 export {
   Sheet,
   SheetPortal,
@@ -44,4 +49,4 @@ export {
   SheetDescription,
 } from "./sheet";
 export { Switch } from "./switch";
-export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
+export { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";

app/src/components/ui/rotating-text/RotatingText.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import { useEffect, useState, useRef } from "react";
+import cn from "lib/util/cn";
+
+interface RotatingTextProps {
+  prefix?: string;
+  suffix?: string;
+  words: string[];
+  interval?: number;
+  className?: string;
+}
+
+const colors = [
+  "from-purple-500 to-blue-500",
+  "from-blue-500 to-teal-500",
+  "from-teal-500 to-emerald-500",
+  "from-emerald-500 to-yellow-500",
+  "from-yellow-500 to-orange-500",
+  "from-orange-500 to-red-500",
+  "from-red-500 to-pink-500",
+  "from-pink-500 to-purple-500",
+];
+
+export const RotatingText = ({
+  prefix = "Visualize your",
+  suffix = "Ecosystem",
+  interval = 3000,
+  className = "",
+  words,
+}: RotatingTextProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [currentColor, setCurrentColor] = useState(0);
+  const [isChanging, setIsChanging] = useState(false);
+  const wordRef = useRef<HTMLSpanElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // handle word rotation
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setIsChanging(true);
+
+      setTimeout(() => {
+        setCurrentIndex((prevIndex) => (prevIndex + 1) % words.length);
+        setCurrentColor((prevColor) => (prevColor + 1) % colors.length);
+
+        setTimeout(() => {
+          setIsChanging(false);
+        }, 100);
+      }, 300);
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, [interval, words.length]);
+
+  return (
+    <div className={`flex items-center justify-center ${className}`}>
+      <h1 className="py-2 font-bold text-3xl tracking-tighter sm:text-4xl md:text-5xl flex flex-wrap items-center">
+        <span
+          className="transition-all duration-300 ease-in-out"
+          style={{
+            transform: isChanging ? "translateX(8px)" : "translateX(0)",
+          }}
+        >
+          {prefix}
+        </span>
+
+        <div
+          ref={containerRef}
+          className="inline-block mx-3 text-center relative"
+        >
+          <span
+            ref={wordRef}
+            className={cn(
+              `inline-block bg-gradient-to-r ${colors[currentColor]} bg-clip-text text-transparent transition-all duration-300 py-1`,
+              isChanging ? "opacity-0 scale-95" : "opacity-100 scale-100"
+            )}
+          >
+            {words[currentIndex]}
+          </span>
+        </div>
+
+        <span
+          className="transition-all duration-300 ease-in-out"
+          style={{
+            transform: isChanging ? "translateX(-8px)" : "translateX(0)",
+          }}
+        >
+          {suffix}
+        </span>
+      </h1>
+    </div>
+  );
+};
+
+export default RotatingText;

app/src/components/ui/rotating-text/index.ts

@@ -0,0 +1 @@
+export { default as RotatingText } from "./RotatingText";