<![CDATA[build with Domi]]>https://build-with-domi.hashnode.devRSS for NodeThu, 17 Sep 2026 00:02:14 GMT60<![CDATA[Building a Premium Accordion Component: A Journey from Basic to Beautiful]]>https://build-with-domi.hashnode.dev/building-a-premium-accordion-component-a-journey-from-basic-to-beautifulhttps://build-with-domi.hashnode.dev/building-a-premium-accordion-component-a-journey-from-basic-to-beautifulWed, 13 Aug 2025 02:52:59 GMTTL;DR: I got obsessed with a luxury brand's accordion component and decided to reverse-engineer it. This tutorial shows you how to build an accordion that doesn't just work—it performs. We're talking 60fps GSAP animations, 3D micro-interactions, comprehensive accessibility, and the kind of attention to detail that makes interfaces feel expensive.

What You'll Learn:

  • How to implement buttery-smooth height animations with GSAP (because CSS still can't handle height: auto)

  • Creating GPU-accelerated micro-interactions that run at 60fps

  • Building truly accessible components with proper ARIA attributes, keyboard navigation, and screen reader support

  • Performance optimization techniques including React.memo, RAF throttling, and lazy rendering

  • Advanced patterns like ref methods for programmatic control and staggered content animations

Tech Stack: Next.js 15 • TypeScript • GSAP • Tailwind CSS • Custom React Hooks

Time to Read: 25 minutes | Difficulty: Intermediate to Advanced

Prerequisites: Working knowledge of React, TypeScript basics, and familiarity with React Hooks

GitHub Repository: http://github.com/DomiDex/premium-accordion
Tutorial: https://www.100daysofcraft.com/blog/motion-interactions/premium-accordion-component

]]><![CDATA[Building a Magnetic Cursor Effect That Actually Feels Good: A Deep Dive into Physics-Based Web Interactions]]>https://build-with-domi.hashnode.dev/building-a-magnetic-cursor-effect-that-actually-feels-good-a-deep-dive-into-physics-based-web-interactionshttps://build-with-domi.hashnode.dev/building-a-magnetic-cursor-effect-that-actually-feels-good-a-deep-dive-into-physics-based-web-interactionsTue, 12 Aug 2025 01:31:50 GMTHey Hashnode fam! 👋

Ever noticed how luxury brand websites have those satisfying magnetic cursors that just feel right? I went down a rabbit hole trying to recreate this effect and learned way more about physics, performance, and human perception than I expected.

In this deep dive, I'm sharing everything: from the basic physics equations to the weird edge cases nobody talks about (like why your magnetic effect breaks when users scroll without moving their mouse).

What You'll Learn:

  • How to implement realistic magnetic forces using GSAP and Next.js 15

  • Why my first attempt at strength 0.7 was hilariously wrong

  • The secret to edge-only magnetism for large cards

  • Performance optimizations that keep everything at 60fps

  • Those tiny details that separate "meh" from "magical"

Quick Preview:

typescript

// The force equation that powers everything
const magneticForce = (distance: number, threshold: number): number => {
  if (distance >= threshold) return 0;
  return 1 - distance / threshold;
};

Whether you're building your portfolio or working on client projects, these techniques will level up your interaction game. Plus, I'm sharing all the strength values that actually work in production (spoiler: they're way smaller than you think).

Let's dive in! And if you implement your own version, drop a comment – I'd love to see what you create!

Find the tutorial, demo and codebase here: https://www.100daysofcraft.com/blog/motion-interactions/building-a-magnetic-cursor-effect

]]>