Project Overview Overview
The King Law Firm website was constructed using a decoupled architecture, employing semantic HTML, custom CSS variables, and Vanilla JavaScript on the frontend, while utilizing Sanity CMS as a headless backend for content management.
Key technical implementations include a highly interactive scroll-linked stacking card animation for testimonials, an infinite-scrolling SVG logo marquee using CSS keyframes, and an Intersection Observer-based video autoplay system to ensure optimal performance. The site also features a dynamic, tabbed FAQ section and mobile navigation with background blur effects.
Tech Stack Stack
Sanity.io Sanity.io
Headless CMS
Vanilla JS Vanilla JS
Performance
Key Features Features
- Sanity CMS Headless Integration
- Scroll-Linked Stacking Card Animations
- Infinite CSS Logo Marquee
- Intersection Observer Video Autoplay
- Category-Filtered Interactive FAQ
In Motion Motion
Responsive Design Devices
A seamless experience across desktop, tablet, and mobile devices.
Gallery Visuals
Technical Challenges Core
Creating a sticky, stacking card scroll effect for the testimonials section that works smoothly across different viewport heights without jank.
Utilized a combination of CSS 'position: sticky' on the parent container and custom JavaScript math tracking 'window.scrollY' mapped against the container's boundaries to calculate precise translation and scaling values for each card dynamically.
Loading dynamic content efficiently without a traditional build step or server-side rendering framework.
Imported the '@sanity/client' directly via ESM modules ('https://esm.sh') in a script tag, executing GROQ queries in real-time to hydrate the DOM upon load.
Key Takeaways
- Integrated Sanity CMS as a headless backend via ESM imports directly in the browser to fetch and render dynamic hero content using GROQ queries.
- Engineered a complex scroll-linked animation system using Vanilla JavaScript to stack and unstack testimonial cards interactively based on scroll progress mapped against the container's bounding rectangle.
- Implemented an infinite-scrolling logo marquee purely in CSS, optimizing performance and eliminating the need for heavy JavaScript slider libraries.
- Utilized the Intersection Observer API for intelligent video autoplay/pause functionality, ensuring media only plays when visible to preserve client resources.
Project Outcomes Impact
- Delivered a visually striking, highly interactive platform that establishes digital authority for the firm.
- Empowered the client to manage critical site copy independently via the Sanity Studio dashboard without developer intervention.