Awwwards
Award-winning complete landing page with premium design and smooth animations. Inspired by Awwwards showcases.
Main Features of Awwwards
How to Use Awwwards in Next.js
Installation Guide for Awwwards
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
primaryColor | string | #16a34a | Primary brand color (green in default theme). |
title | string | Your Title Here | Main hero title text. |
subtitle | string | Your subtitle description | Hero subtitle or description text. |
enableCursor | boolean | true | Enable custom cursor effect. |
enableGrain | boolean | true | Enable grainy texture overlay. |
animationSpeed | number | 1 | Animation speed multiplier (0.5-2). |
Related Components
Cartoonish
Playful cartoon-style hero section with fun animations and vibrant colors.
Draggable
Interactive hero section with draggable elements and smooth physics-based interactions.
Glass Operating System
Glassmorphism hero section with frosted glass effects and modern OS-inspired design.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QIs the grainy texture real?
Yes, the component features a built-in noise overlay (`enableGrain`) that adds a subtle, high-fidelity tactile feel to all background layers.
QCan I use it for a portfolio?
Absolutely, it features responsive showcases and project-focused sections specifically designed for deep visual storytelling.
QHow does the custom cursor work?
The `enableCursor` prop triggers a localized, animated pointer that morphs and scales as the user interacts with primary links and images.