Aceternity UI

3 snippets

Animated, high-impact effects for hero sections and feature showcases.

Floating Navbar

Featured

Detaching glassmorphism navbar on scroll

"use client";
import { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";

export function FloatingNav({ items }: {
Aceternity UI tsx · 45 lines

Spotlight Effect

Featured

Mouse-tracking spotlight hover effect

"use client";
import { useRef, useState } from "react";
import { motion } from "framer-motion";

export function Spotlight({ children, className = "" }: {
Aceternity UI tsx · 39 lines

Text Generate Effect

Words fade in one by one with blur effect

"use client";
import { motion } from "framer-motion";

export function TextGenerate({ text, className = "" }: {
  text: string;
Aceternity UI tsx · 26 lines