Radiant: A beautiful new marketing site template

Source: Tailwind Labs Date: 2024-09-12 URL: https://tailwindcss.com/blog/2024-09-12-radiant-a-beautiful-new-marketing-site-template

Summary

Radiant is a SaaS marketing site template built with Next.js, Framer Motion, and Sanity CMS. Key technical patterns: interaction-triggered animations (not scroll-fired) for fast perceived performance, Framer Motion variant propagation for hover state inheritance across nested elements, CSS animation-delay offsetting for shared keyframe pause-on-hover, and Sanity CMS replacing MDX for the blog (returning JSON for custom component mapping).

Implications

• Sanity CMS replacing MDX for the blog content is the first Tailwind Plus template to bet on a headless CMS over file-based content — meaningful for teams evaluating whether to build content sites with Tailwind Plus + a headless CMS vs. MDX. The template validates the pattern commercially.
• Framer Motion variant propagation (triggering hover states across nested elements without prop drilling) is a documented technique but Radiant makes it the design system-level default. The pattern reduces animation code substantially in component trees.
• Interaction-triggered vs. scroll-triggered animation choice is explicit in the blog post — Tailwind Labs is making a UX argument (fast perceived performance, no layout reflow on scroll) not just an implementation choice. This positions against the “animate everything on scroll” trend.
• CSS animation-delay offsetting trick for staggered logos that pause individually on hover is a generalizable technique that requires no JavaScript — pure CSS solutions to animation problems are increasingly the Tailwind Labs default.