Components
Loading preview...
A scroll effect with rotation, translation and opacity animations.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/hero-parallax"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://aceternity.com/images/products/thumbnails/new/moonbeam.png",
},
{
title: "Cursor",
link: "https://cursor.so",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/cursor.png",
},
{
title: "Rogue",
link: "https://userogue.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/rogue.png",
},
{
title: "Editorially",
link: "https://editorially.org",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/editorially.png",
},
{
title: "Editrix AI",
link: "https://editrix.ai",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/editrix.png",
},
{
title: "Pixel Perfect",
link: "https://app.pixelperfect.quest",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/pixelperfect.png",
},
{
title: "Algochurn",
link: "https://algochurn.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/algochurn.png",
},
{
title: "Aceternity UI",
link: "https://ui.aceternity.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/aceternityui.png",
},
{
title: "Tailwind Master Kit",
link: "https://tailwindmasterkit.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/tailwindmasterkit.png",
},
{
title: "SmartBridge",
link: "https://smartbridgetech.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/smartbridge.png",
},
{
title: "Renderwork Studio",
link: "https://renderwork.studio",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/renderwork.png",
},
{
title: "Creme Digital",
link: "https://cremedigital.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/cremedigital.png",
},
{
title: "Golden Bells Academy",
link: "https://goldenbellsacademy.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/goldenbellsacademy.png",
},
{
title: "Invoker Labs",
link: "https://invoker.lol",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/invoker.png",
},
{
title: "E Free Invoice",
link: "https://efreeinvoice.com",
thumbnail:
"https://aceternity.com/images/products/thumbnails/new/efreeinvoice.png",
},
];