Introducing Aceternity UI Pro - Premium component packs and templates to build awesome websites.
Logo

Make your websites look
10x
better

Copy paste the most trending components and use them in your websites without having to worry about styling and animations.

Next.js
React
TailwindCSS
Framer Motion

As simple as copy and paste

Copy paste the code into your ui folder and use the components in your projects. It's that simple, really.

esc
F1
F2
F3
F4
F5
F6
F7
F8
F8
F10
F11
F12
~`
!1
@2
#3
$4
%5
^6
&7
*8
(9
)0
_
+ =
delete
tab
Q
W
E
R
T
Y
U
I
O
P
{[
}]
|\
caps lock
A
S
D
F
G
H
J
K
L
:;
"'
return
shift
Z
X
C
V
B
N
M
<,
>.
?/
shift
fn
control
option
command
command
option
"use client";
  import { useEffect, useState } from "react";
  import { motion } from "framer-motion";
  
  let interval: any;
  
  type Card = {
    id: number;
    name: string;
    designation: string;
    content: React.ReactNode;
  };
  
  export const CardStack = ({
    items,
    offset,
    scaleFactor,
  }: {
    items: Card[];
    offset?: number;
    scaleFactor?: number;
  }) => {
    const CARD_OFFSET = offset || 10;
    const SCALE_FACTOR = scaleFactor || 0.06;
    const [cards, setCards] = useState<Card[]>(items);
  
    useEffect(() => {
      startFlipping();
  
      return () => clearInterval(interval);
    }, []);
    const startFlipping = () => {
      interval = setInterval(() => {
        setCards((prevCards: Card[]) => {
          const newArray = [...prevCards]; // create a copy of the array
          newArray.unshift(newArray.pop()!); // move the last element to the front
          return newArray;
        });
      }, 5000);
    };
  
    return (
      <div className="relative  h-60 w-60 md:h-60 md:w-96">
        {cards.map((card, index) => {
          return (
            <motion.div
              key={card.id}
              className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1]  shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between"
              style={{
                transformOrigin: "top center",
              }}
              animate={{
                top: index * -CARD_OFFSET,
                scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
                zIndex: cards.length - index, //  decrease z-index for the cards that are behind
              }}
            >
              <div className="font-normal text-neutral-700 dark:text-neutral-200">
                {card.content}
              </div>
              <div>
                <p className="text-neutral-500 font-medium dark:text-white">
                  {card.name}
                </p>
                <p className="text-neutral-400 font-normal dark:text-neutral-200">
                  {card.designation}
                </p>
              </div>
            </motion.div>
          );
        })}
      </div>
    );
  };
  

Loved by thousands of people

Here's what some of our users have to say about Aceternity UI.

Featured by popular YouTubers

Fireship
Josh Tried Coding
Chai Aur Code
Adrian Twarog
Javascript Mastery
Raj Talks Tech
A product by Aceternity
Building in public at @mannupaaji