SWWIM Social Agency Landing Page

Overview

This landing page is a high-impact agency showcase for SWWIM, featuring a bold, liquid-inspired aesthetic that breaks traditional grid boundaries. It is an excellent reference for builders looking to implement organic shapes, fluid scrolling animations, and a sophisticated monochromatic-to-high-contrast color transition.

Design System

• Color Palette & Visual Hierarchy: The site uses a deep "Blue-Dark" and a vibrant "Blue" base accented with white and a "grain" texture overlay for tactile depth. Hierarchy is established through massive display typography and negative space, transitioning from a dark blue hero into a clean white content section.
• Typography: A heavy, all-caps sans-serif font-display is used for headers (up to 170px) to create high visual impact. Body copy uses a medium-weight sans-serif for readability, with "Social Media Marketing" and "That Floats" serving as the primary anchors.
• Page Structure:
  1. Hero Section: Large-scale typography overlaying a wave-shaped divider.
  2. Ticker Marquee: A horizontal scrolling list of services (Brand Strategy, Events, etc.) between borders.
  3. Intro Grid: An asymmetrical layout featuring overlapping images with parallax speeds and floating SVG icons (megaphone, rubber ring).
  4. News/Feed Section: A vertical list of articles with high-contrast text and hover-active image previews.
• Reusable Components:
  • Floating SVGs: Elements with animate--wiggle and animate--float classes.
  • Marquee: A two-part CSS animation creates a seamless loop for service lists.
  • Wave Divider: A large SVG/div shape that creates the liquid transition between background colors.
  • Fancy Links: Links with a bottom border and marquee hover state.
• Interactions: The design relies on data-scroll-speed for parallax effects and transform: translateY for text reveal animations. Buttons feature scale transitions (hover:scale-[1.15]), and the custom grain overlay (.grain) is fixed to the viewport to maintain texture during scroll.
• Implementation Clues: Built with Next.js (__next), Tailwind CSS (utility classes like bg-blue-dark, flex, z-[100]), and Sanity CMS for image assets. Scroll-based triggers are handled via a custom library indicated by data-scroll-container and is-inview attributes.

Use Cases

• Who should clone this: Creative agencies, boutique studios, or freelancers needing a high-energy, personality-driven portfolio that feels premium and custom-coded.
• Remix Directions: Swap the blue palette for a brand-specific primary color; the grain texture and wave-style dividers will work with any high-contrast pairing (e.g., Deep Green to Cream). The asymmetrical image grid is perfect for showcasing product photography or architectural projects.
• Suggested Scope: Developers should prioritize cloning the Hero Wave Section and the Scroll-Triggered Image Grid as standalone modules to elevate existing flat designs. The full-page clone is best for those wanting to replicate the specific high-motion "smooth scroll" feel of the original.