La Puce à l’oreille Podcast Homepage

Overview

La Puce à l’oreille is a children's podcast platform that utilizes a highly interactive, playful design to facilitate educational discovery. It is an excellent clone reference for its sophisticated use of Locomotive Scroll, magnetic cursor effects, and SVG-heavy visual identity that manages to feel high-end yet accessible to younger audiences.

Design System

• Color Palette & Visual Hierarchy: The site uses a soft pastel base (Peach #F6E0DB) contrasted with vibrant accent colors (Coral #EF724F, Yellow #E7DB4C, and Mint #ACE2DF). Visual hierarchy is established through massive display typography and high-contrast black borders around buttons.
• Typography: A bold, geometric sans-serif (resembling Helvetica or Inter) is used for the H1 headings (.c-interactive-hero__title), scaled very large to command the screen. Smaller utility text in standard sans-serif maintains legibility within the interactive widgets.
• Page Structure: The layout follows a modular grid of "widgets." It opens with a floating hero section, followed by a dense grid of asymmetrical interactive cards (.c-list-widgets), a horizontal swiper for podcast listings (.c-podcasts-list), and bottom CTA sections for teacher resources and collaborations.
• Reusable Components:
  • Magnetic Buttons: Round buttons (.c-button--round) with multi-layered SVG hover effects.
  • Interactive Letter Containers: Words in the hero are wrapped in spans (.c-interactive-hero__title_letter) allowing for staggered animation entries and per-character hover states.
  • Floating SVG Decor: Parallax-enabled icons (bots, brushes, microscopes) that drift with scroll speed.
• Interaction Patterns:
  • Magnetic Hover: Elements use a Magnetic class to slightly track cursor movement, creating a tactile feel.
  • Liquid Transitions: Multi-colored full-screen loading divs (.loader__bg) that slide across the screen between state changes.
  • Locomotive Scroll: Integrated smooth scrolling with section-based parallax (visible in the HTML data-scroll-section attributes).
• Implementation Clues: The HTML reveals a Nuxt.js framework usage with Scoped CSS (e.g., data-v- attributes). The js-locomotive class handles global smooth scroll, while GSAP is likely used for the complex magnetic and per-letter animations.

Use Cases

• Who should clone this: Creative studios, educational platforms for kids, or portfolio sites for illustrators and motion designers looking to showcase technical prowess.
• Effective Remixes:
  • E-learning: Swap the podcast cards for course modules while keeping the playful, non-traditional grid.
  • Portfolio: Use the magnetic widget grid for project thumbnails to make cases feel interactive and high-budget.
• Practical Directions:
  • Quick Remix: Reuse the "Floating Icon Layer" logic to add depth to any standard landing page background without impacting core information architecture.
  • Scope: Start by cloning the "Magnetic Card" system; it is the most distinct UI element and can be integrated into simpler layouts easily. A full-page clone is best for high-engagement, creative-first brands.