Nyx UI

Hero Section 12

A two-column landing hero with massive typography, social proof avatars, an interactive tech stack, and a stack of live visual demos.

Next
Generation
Components.

Easily plug in the latest trending components and build stunning websites without stressing over design consistency or animations.

48 components12 templates10 blocks
Founder 1
Founder 2
Founder 3
Founder 4
Founder 5

Installs this month

48.2k+18%
Now Playing
Album Cover

Until I Found You

Stephen Sanchez

Single • 2022

2:054:08
MAY 181524JUN 1

Ship the component library

May 1 – May 20

Wire up the design tokens

May 14 – Jun 1

Publish the changelog

May 28 – Jun 8

JUN 8
useDebounce.ts
1import { useEffect, useState } from "react";
2
3export function useDebounce<T>(value: T, delay = 300) {
4 const [debounced, setDebounced] = useState(value);
5
6 useEffect(() => {
7 const id = setTimeout(() => setDebounced(value), delay);
8 return () => clearTimeout(id);
9 }, [value, delay]);
10
11 return debounced;
12}
Sofia

Thanks for your feedback!

Hero Section 12 is a two column landing hero with massive typography on the left and a stack of live visual demos on the right, plus social proof logos and an interactive tech stack picker. Every demo animates continuously, so the hero shows the product working rather than describing it. Built with GSAP, Framer Motion, and React. A flagship opening screen for component libraries and design tooling products.

Installation

Install dependencies.

Copy and paste the following code into your project.

Unlock the full library

Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.

Get All Access

Update the import paths to match your project setup.