Truus.co — Awwward-Winning Web Design Clone is a Next.js 15 + React 19 single-page website template that recreates the award-winning Truus advertising agency site with GSAP-driven animations and physics-based interactions.
Originally built in vanilla HTML/CSS/JS, this project has been fully transformed to Next.js 15 and React 19, with all animations, interactions, and assets ported 1:1. It runs as a single-page app using the App Router, styles everything with modular vanilla CSS (11 partials imported through one globals.css entry point), and centralizes all static data in lib/data.js — brands, colors, social icons, card definitions, and a WIGGLE_CONFIG object that controls hover-wiggle rotation per element from a single source.
What is the Truus.co Awwward Website Clone?
The clone is a high-fidelity recreation of the Truus.co advertising agency website, designed to showcase premium frontend experiences similar to Site of the Day–level digital projects. It takes static data from lib/data.js and self-hosted SVG/font assets from public/, and outputs a complete interactive page featuring a video hero, motion cards, service cards, a double marquee, horizontal scrolling words, and a sticker-filled footer. Developed by Arkyadeep Pal, Soumyakanta Mitra, and Anshu Ram, the project is published on GitHub for educational and portfolio use.
Key Features
- GSAP InertiaPlugin fling — Motion cards and floating labels track mouse velocity and fling with physics-based inertia on mouseleave, using GSAP InertiaPlugin configured in MotionCards.jsx.
- Page transition scribble — A full-screen GSAP-powered scribble mask draws/undraws on logo click with random color selection, logo wiggle, and auto-scroll to top via TransitionScribble.jsx.
- Elastic card interactions — Service cards fan out horizontally on hover with elastic bounce (GSAP Elastic), scale up on hover, and stack vertically on mobile via ScrollTrigger in ServiceCards.jsx.
- Custom cursor bubble — A GSAP quickTo-based blob follows the cursor and pops in elastically over clickable elements with context-aware text; a separate mute bubble works over the video hero.
- Seam-safe double marquee — Infinite scrolling brand logos use two constraint-aware helpers,
shuffleNoAdjacentSrcandassignColorsNoAdjacent, to ensure no two adjacent logos or colors repeat even at the loop seam. - Lenis smooth scroll — Ultra-smooth inertia scrolling is synced with GSAP's ticker via SmoothScroll.jsx, and the tab title changes to "Hey, over here! 👋" when the tab loses focus.
- Scroll-triggered SVG draws — Hand-drawn underlines, arrows, and paths animate in with stroke-dasharray animations as the user scrolls, driven by GSAP ScrollTrigger across multiple components.
Who is it for?
- Frontend developers learning GSAP and ScrollTrigger can study production-grade patterns like InertiaPlugin flings, elastic springs, and scroll-driven SVG strokes in a complete codebase.
- Portfolio designers who want an Awwwards-style single-page site can adapt the components, colors, stickers, and data in lib/data.js and public/assets with their own branding.
- Agency developers building interactive landing pages or showreel sites can use the prebuilt sections — hero, motion cards, service cards, marquee, horizontal words, footer — as a starting kit.
What can you do with it?
- Build an interactive portfolio: Replace the brand logos, card data, stickers, and colors in lib/data.js and public/assets to create a customized showcase site with the same GSAP interactions.
- Prototype agency websites: Use the provided sections as a component kit for an ad agency or creative studio site, including the elastic service cards and double marquee.
- Study GSAP integration: Trace how Lenis syncs with GSAP's ticker, how ScrollTrigger pins and bounces letters in HorizontalWords.jsx, and how the InertiaPlugin fling is configured in MotionCards.jsx.
How does it work?
The project uses the Next.js App Router: layout.jsx sets the root HTML and metadata, page.jsx assembles all components, and each section is an isolated React component importing modular CSS partials. Setup follows standard Next.js steps: clone the repository, run npm install, start the dev server with npm run dev, and open http://localhost:3000. The hero video src is commented out because the original Vimeo video is domain-restricted to truus.co, so you must place an .mp4 in public/ and update VimeoHero.jsx to show video content.
Pros and cons
- Pros: Self-hosted fonts, brand logos, stickers, and SVGs (zero CDN dependency); modular 11-part CSS system; all data and animation configs centralized in lib/data.js; responsive layouts for tablet and mobile via responsive.css.
- Cons: The hero video will not display without a self-hosted .mp4 replacement; it is a single-page template rather than a multi-page boilerplate; original brand assets belong to Truus.co and are not licensed for commercial use.
FAQ
Does this project use Tailwind CSS?
No. The styling system is vanilla CSS built on CSS variables, organized into 11 partial stylesheets that are imported through a single globals.css entry point. There is zero Tailwind dependency.
How do I add my own hero video?
Place your .mp4 file in the public/ folder, then open components/VimeoHero.jsx and uncomment or update the video src attribute. The original Vimeo src is commented out because Truus.co's video is restricted by Vimeo domain-level privacy settings.
What version of Next.js does this use?
The project runs on Next.js 15 with React 19 and uses the App Router for file-based routing. Animations are powered by GSAP with ScrollTrigger and InertiaPlugin, and scrolling uses Lenis synced to GSAP's ticker.
Can I use this commercially?
The project is published for educational and portfolio purposes. All original brand assets belong to Truus.co, so commercial or public deployments should replace the branding, logos, stickers, and content with your own.
