A scroll effect with rotation, translation and opacity animations.
"use client";
import React from "react";
import { HeroParallax } from "@/components/blocks/hero-parallax";
export function HeroParallaxDemo() {
return (
<div className="min-h-screen w-full">
<div className="absolute top-0 left-0 w-full">
<HeroParallax products={products} />
</div>
</div>
);
}
export const products = [
{
title: "Moonbeam",
link: "https://gomoonbeam.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/00/0078af2419c8685262b4cb05ea3387bc1b4dc0aff1cc86784fa5c21355110f85.png",
},
{
title: "Cursor",
link: "https://cursor.so",
thumbnail:
"https://cdn.21st.dev/assets/mirror/a9/a9e66d34a03bb780d87a046622415fe66996e805d1a55af26e3fbb0c6d161df5.png",
},
{
title: "Rogue",
link: "https://userogue.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/14/14a2ca44971e7a57f400fb4234791307dc8a884480f088d55c93f1da810bec1b.png",
},
{
title: "Editorially",
link: "https://editorially.org",
thumbnail:
"https://cdn.21st.dev/assets/mirror/7e/7ec6b0631c5ec4bb73db25a679e53512881cda9505de9f99d5eea88386e395c7.png",
},
{
title: "Editrix AI",
link: "https://editrix.ai",
thumbnail:
"https://cdn.21st.dev/assets/mirror/fc/fc2bb00ed499d276e6a5d4443e6dcf098fac9f6766642a299a81c64789b0622e.png",
},
{
title: "Pixel Perfect",
link: "https://app.pixelperfect.quest",
thumbnail:
"https://cdn.21st.dev/assets/mirror/b5/b51f454a6a9bb89c7d7e7fc105f7d160f1153025cdf67e5c64a51a9b63c4a573.png",
},
{
title: "Algochurn",
link: "https://algochurn.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/3c/3cc4bdb349803dd76c89837cc1ca7dd4a113515584aa000312d80fdb1a413f04.png",
},
{
title: "Aceternity UI",
link: "https://ui.aceternity.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/0e/0ef45b035d910971f334f4772f087a0e5dd98581949fc3ccbe5c2701ab56bb1d.png",
},
{
title: "Tailwind Master Kit",
link: "https://tailwindmasterkit.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/8b/8b23235b5768392458daa681a9dda498119c1bf3f13fef09cc3a245380b6c667.png",
},
{
title: "SmartBridge",
link: "https://smartbridgetech.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/e5/e51c0891a3642cb996939dbd684f05c25be0eaae0b07d35e3bc116f4ac27851c.png",
},
{
title: "Renderwork Studio",
link: "https://renderwork.studio",
thumbnail:
"https://cdn.21st.dev/assets/mirror/3d/3d180ec296d869336365946cb2daefe986ecbd39d8a5d4a4048609ec1cb7ebbb.png",
},
{
title: "Creme Digital",
link: "https://cremedigital.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/03/033a3e4edc9fbba9007dd73b8c0090e530387945d7de5f1feeb461dbee00a199.png",
},
{
title: "Golden Bells Academy",
link: "https://goldenbellsacademy.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/b3/b3a5d3324e18812bd72162b467947892d436762fc40f61b4f5a38d806d9891e1.png",
},
{
title: "Invoker Labs",
link: "https://invoker.lol",
thumbnail:
"https://cdn.21st.dev/assets/mirror/e1/e12f1285b2695143f5449c31ccb4594ce95cb90770941e25d7184bad0387807b.png",
},
{
title: "E Free Invoice",
link: "https://efreeinvoice.com",
thumbnail:
"https://cdn.21st.dev/assets/mirror/f8/f8b50d29904a7459e1e1fd88ce60003155ce69597d2a4ab57cc25975783e6bd1.png",
},
];
Part of Aceternity UI — browse the full library on 21st.dev.