From 738f533d4c310902859f980deda5a851c0798f9e Mon Sep 17 00:00:00 2001 From: asepharyana Date: Sun, 20 Sep 2026 22:19:37 +0700 Subject: [PATCH] feat(ui): demo all vendored Aceternity components in /ui gallery Expand the showcase from ~20 to all ~45 vendored components: - Waves/boxes/spotlights: WavyBackground, Boxes, Spotlight, BackgroundGradient - Text: Cover, TextGenerateEffect, TextHoverEffect, SquigglyText, TextRevealCard - Cards/buttons: Meteors, GlareCard, MagneticButton - Interaction: GooeyInput, Notch, FloatingDock, AnimatedModal, AnimatedTabs - Scroll: StickyScroll, ContainerScroll, Timeline, HeroParallax, ParallaxScroll, MaskContainer (svg-mask), FocusCards, HoverEffect, Tooltip, MultiStepLoader - GoogleGeminiEffect wired with 5 useTransform pathLengths from scrollYProgress Full gate green (lint/typecheck/test/build/format) + SSR verified on /ui. --- .github/dependabot-auto-merge.yml | 2 +- components/showcase/gallery.tsx | 366 ++++++++++++++++++++++++++++++ 2 files changed, 367 insertions(+), 1 deletion(-) diff --git a/.github/dependabot-auto-merge.yml b/.github/dependabot-auto-merge.yml index b36eb6f..6a2c1ad 100644 --- a/.github/dependabot-auto-merge.yml +++ b/.github/dependabot-auto-merge.yml @@ -41,4 +41,4 @@ jobs: run: gh pr merge --auto --merge "$PR_URL" env: PR_URL: ${{ github.event.pull_request.html_url }} - GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} \ No newline at end of file + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} diff --git a/components/showcase/gallery.tsx b/components/showcase/gallery.tsx index d41359d..6701caa 100644 --- a/components/showcase/gallery.tsx +++ b/components/showcase/gallery.tsx @@ -22,6 +22,47 @@ import { ThreeDMarquee } from "@/components/ui/3d-marquee"; import { TracingBeam } from "@/components/ui/tracing-beam"; import { TypewriterEffect } from "@/components/ui/typewriter-effect"; import { AnimatedTooltip } from "@/components/ui/animated-tooltip"; +import { Tabs } from "@/components/ui/animated-tabs"; +import { WavyBackground } from "@/components/ui/wavy-background"; +import { Boxes } from "@/components/ui/background-boxes"; +import { Spotlight } from "@/components/ui/spotlight"; +import { Cover } from "@/components/ui/cover"; +import { TextGenerateEffect } from "@/components/ui/text-generate-effect"; +import { TextHoverEffect } from "@/components/ui/text-hover-effect"; +import { SquigglyText } from "@/components/ui/squiggly-text"; +import { + TextRevealCard, + TextRevealCardTitle, + TextRevealCardDescription, +} from "@/components/ui/text-reveal-card"; +import { Meteors } from "@/components/ui/meteors"; +import { GlareCard } from "@/components/ui/glare-card"; +import { MagneticButton } from "@/components/ui/magnetic-button"; +import { GooeyInput } from "@/components/ui/gooey-input"; +import { Notch } from "@/components/ui/notch"; +import { FloatingDock } from "@/components/ui/floating-dock"; +import { HeroParallax } from "@/components/ui/hero-parallax"; +import { ParallaxScroll } from "@/components/ui/parallax-scroll"; +import { ContainerScroll } from "@/components/ui/container-scroll-animation"; +import { StickyScroll } from "@/components/ui/sticky-scroll-reveal"; +import { Timeline } from "@/components/ui/timeline"; +import { FocusCards } from "@/components/ui/focus-cards"; +import { Tooltip } from "@/components/ui/tooltip-card"; +import { HoverEffect } from "@/components/ui/card-hover-effect"; +import { BackgroundGradient } from "@/components/ui/background-gradient"; +import { MultiStepLoader } from "@/components/ui/multi-step-loader"; +import { + ModalProvider, + Modal, + ModalTrigger, + ModalBody, + ModalContent, + ModalFooter, +} from "@/components/ui/animated-modal"; +import { MaskContainer } from "@/components/ui/svg-mask-effect"; +import { GoogleGeminiEffect } from "@/components/ui/google-gemini-effect"; +import { IconHome, IconUser, IconSettings, IconMoon, IconSun } from "@tabler/icons-react"; +import { useScroll, useTransform, MotionValue } from "motion/react"; function Card({ children, @@ -343,6 +384,331 @@ export function ShowcaseGallery() { /> + +
+ +
+ + +

WavyBackground

+

+ Animated SVG waves behind content. +

+ + + +
+ +

+ Boxes — grid dots pattern +

+
+ + +
+ +

Spotlight

+
+ + + +

+ BackgroundGradient — animated border glow +

+ + +
+
+ +
+ +
+ +

+ Outline Cover underline +

+ + + + + + + + + + SquigglyText wobble + + + + + TextRevealCard + + The card's cyan gradient sweeps in on hover. + + + +
+
+ +
+ +
+ +
+ +

Meteors

+
+ + + +

GlareCard

+ + + + + + MagneticButton + + + +
+
+ +
+ +
+ + + + + }, + { id: "dark", label: "Dark", icon: }, + ], + }, + ]} + /> + + + , href: "#" }, + { title: "Profile", icon: , href: "#" }, + { title: "Settings", icon: , href: "#" }, + ]} + /> + + + + + + + Open animated modal + + + + +

+ Animated Modal +

+

+ The modal scales and fades, with a fancy backdrop. +

+ + + + + + + + +
+
+ +
+ +
+ + + + + ContainerScroll

+ } + > +
+

+ The card scales up as you scroll past. +

+
+ + + + Vendor registry components into the template., + }, + { title: "2026 · Phase 2", content: <>Showcase gallery + home hero upgrade. }, + { + title: "2026 · Phase 3", + content: <>Zero-warning toolchain, green CI, auto-deploy., + }, + ]} + /> + +
+
+ +
+ +
+ + + + + + + + Tooltip on hover

}> + + Hover this for a tooltip + + + + + + + + Revealed!

} + className="h-[16rem]" + > +

+ Hover over this masked block +

+ + + + + + + + +
+
+ +
+ +
+ + Overview tab

, + }, + { + title: "Details", + value: "details", + content:

Details tab

, + }, + { + title: "Settings", + value: "settings", + content:

Settings tab

, + }, + ]} + /> + + +
+
); } + +function GeminiDemo() { + const { scrollYProgress } = useScroll(); + const pathLengths: MotionValue[] = [ + useTransform(scrollYProgress, [0, 0.2], [0, 1]), + useTransform(scrollYProgress, [0.2, 0.4], [0, 1]), + useTransform(scrollYProgress, [0.4, 0.6], [0, 1]), + useTransform(scrollYProgress, [0.6, 0.8], [0, 1]), + useTransform(scrollYProgress, [0.8, 1], [0, 1]), + ]; + return ( + + + + ); +}