Awwwards
Award-winning complete landing page with premium design and smooth animations. Inspired by Awwwards showcases.
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). |
When to Use
Ideal for high-end digital agencies, award-winning portfolios, and Next.js platforms that want a premium 'Awwwards' aesthetic. Use this full-page template for an immersive experience with smooth scroll animations, grainy textures, and localized cursor effects.
Best Practices
Maintain consistent spacing within your design system by using generous, variable padding. Follow React best practices by managed the grain-shader lifecycle. Optimize for performance by using efficient Framer Motion layout transforms.
Why This Component Matters
Award-winning design communicates digital excellence and high-end craft. This production-ready UI template helpsคุณ build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
FAQ
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.
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.