Bold and Blunt — Elite Marketing Agency Website
A premium, animation-driven marketing agency website built for Bold and Blunt. Designed to feel cinematic and high-end, with scroll-driven animations, a horizontal campaign showcase with embedded YouTube video modals, and a fully integrated contact form with branded transactional emails.
Tech Stack:
Framework: Next.js 15 (App Router) + React 19
Language: TypeScript
Styling: Tailwind CSS
Animations: GSAP (ScrollTrigger) + Framer Motion
Smooth Scrolling: Lenis
Email: Resend API (branded HTML templates)
Forms: React Hook Form + Zod validation
Deployment: Vercel
Key Features:
Cinematic hero with staggered 3D word-by-word text reveal
Scroll-driven horizontal campaign carousel with YouTube video modals
GSAP-powered parallax logo with blur and opacity transitions
Scroll-reactive chromatic background that shifts palette per section
Dual branded email system — team notification + submitter confirmation
Custom font integration (Neusharp-Bold)
Fully responsive, dark theme with gold accent design system
Privacy policy page, social links, and contact form with validation
Live: https://theboldblunt.com
1
3
315
I built an animation-driven website focused on immersive scrolling, smooth transitions, and expressive micro-interactions. The goal was to create a highly engaging experience that feels fluid and intentional rather than decorative. Motion was used to guide attention, explain content hierarchy, and reinforce brand personality.
Solution
I designed animations to be purpose-driven, lightweight, and responsive-safe. Scroll animations were tied to layout logic rather than fixed values, ensuring consistency across devices. Motion was introduced progressively, with careful easing and timing to maintain clarity and performance while still delivering a premium, cinematic feel.
6
8
446
