ComponentsTech Marquee

Tech Marquee

A looping marquee of tech cards that glide horizontally with a soft skew and hover glow, perfect for showcasing stacks or tools you work with.

Installation

$ npx @nehal712521/inprogress add tech-marquee

Requires: react-icons

Preview

The marquee loops infinitely in two directions, with glowing hover states and skewed rows for a subtle parallax feel.

We Work On

Customize items, speed, and layout

VS Code

Unity

Flutter

React

Next.js

Three.js

Blender

Figma

MongoDB

Node.js

Tailwind CSS

VS Code

Unity

Flutter

React

Next.js

Three.js

Blender

Figma

MongoDB

Node.js

Tailwind CSS

VS Code

Unity

Flutter

React

Next.js

Three.js

Blender

Figma

MongoDB

Node.js

Tailwind CSS

Node.js

MongoDB

Figma

Blender

Three.js

Next.js

React

Flutter

Unity

VS Code

Unity

Flutter

React

Next.js

Three.js

Blender

Figma

MongoDB

Node.js

Tailwind CSS

VS Code

Unity

Flutter

React

Next.js

Three.js

Blender

Figma

MongoDB

Node.js

Tailwind CSS

Usage

Drop the component into any section. You can also pass a custom items array if you want to change the tech cards.

import { TechMarquee, type TechMarqueeItem } from "@/components/ui/tech-marquee";

const customItems: TechMarqueeItem[] = [
  { name: "React", icon: <span>⚛️</span>, color: "text-sky-400", glow: "group-hover:shadow-sky-500/25" },
  // ...more items
];

export default function Page() {
  return (
    <main className="min-h-screen bg-black text-white">
      <TechMarquee 
        items={customItems}
        title="Our Tech Stack"
        subtitle="Fully customizable items, speed, and rows"
        topDuration={20}
        bottomDuration={28}
        rows={2}
      />
    </main>
  );
}