DEV Community: Saurabh Chauhan

Building the iPhone Dynamic Island in React: 5 details that make it feel real

Saurabh Chauhan — Fri, 13 Nov 2026 13:29:06 +0000

A Dynamic Island is easy to get right in a screenshot and hard to get right in motion. Done the obvious way, the pill stretches, the text inside squashes, and new content pops in before the shell has room for it.

It takes five small details to make it feel like the one on an iPhone. Here they are, with the code. I build beUI, an open source library of animated React components, and this is how its Dynamic Island works.

Live demo: beui.dev/components/blocks/dynamic-island

1. Resize the shell, don't scale it

The obvious move is scale. It's cheap and runs on the GPU. But scaling the black pill also scales everything inside it, so text and icons stretch while the shell grows.

So the shell animates its real width and height instead. Animating layout properties is usually something to avoid, but here it's one small element, and it's the only way to keep the content crisp.

The catch: you can't animate to width: auto. You need real numbers, which brings us to the next part.

2. Measure before the first paint

Put the content in a wrapper with w-max so it takes its natural size, measure it, and spring the shell to those numbers.

My first version used only a ResizeObserver. It worked until I clicked fast. A ResizeObserver reports after the browser paints, so a quick first click could beat it. The shell had no size yet, and the view snapped open with no animation.

The fix is to measure once in useLayoutEffect (which runs before paint), then let the observer handle changes after that:

function useContentSize() {
  const ref = useRef<HTMLDivElement>(null);
  const [size, setSize] = useState<{ width: number; height: number } | null>(null);

  // Runs before paint, so the shell has real numbers before the first click.
  useLayoutEffect(() => {
    const el = ref.current;
    if (el) setSize({ width: el.offsetWidth, height: el.offsetHeight });
  }, []);

  // Keeps up as views change.
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const observer = new ResizeObserver(() =>
      setSize({ width: el.offsetWidth, height: el.offsetHeight }),
    );
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return [ref, size] as const;
}

3. A border radius you never animate

I expected to animate the radius as the pill turns into a card. You don't have to.

Set border-radius: 32px and leave it. Browsers clamp a radius to half the element's height. At the pill's 37px height, the 32px radius gets clamped and the ends read as a full pill. When the shell grows taller, the full 32px fits and it reads as a rounded card. The shape change comes free with the resize, and nothing can glitch at the corners.

4. Exits are fast and get pulled back in

Each view sits inside AnimatePresence with mode="popLayout". That mode takes the leaving view out of the layout right away, so the measured size is only the new view's, and the shell starts resizing at once.

The leaving view should look like it gets sucked back into the pill:

Exit in 80ms, with no blur, so it's gone before the shrinking shell clips it.
Enter with a spring from scale: 0.9, y: -8 and a 5px blur.
transform-origin: top center, so content unfurls down out of the pill, like under a notch.

I use one spring for the shell and a slightly bouncier one for the content, so the content has a bit more life than the container:

const SHELL = { type: "spring", duration: 0.8, bounce: 0.2 } as const;
const CONTENT = { type: "spring", duration: 0.8, bounce: 0.35 } as const;

5. Reduced motion keeps the fade, drops the movement

Some people turn on "reduce motion" because movement makes them feel sick. The CSS media query can't stop a JavaScript spring, so you need useReducedMotion() from Motion.

With it on, the shell snaps to size, and views only fade. No scale, no slide, no blur. It still shows what changed, it just doesn't move.

Putting it together

Here's a small version with all five details. It uses useContentSize, SHELL and CONTENT from above:

"use client";

import { AnimatePresence, motion, useReducedMotion } from "motion/react";
import type { ReactNode } from "react";

export function Island({ view, children }: { view: string; children: ReactNode }) {
  const reduce = useReducedMotion();
  const [ref, size] = useContentSize();

  return (
    <motion.div
      role="status"
      aria-live="polite"
      initial={false}
      // 126 x 37 is the iPhone pill, used until the first measure.
      animate={size ?? { width: 126, height: 37 }}
      transition={reduce ? { duration: 0 } : SHELL}
      style={{ borderRadius: 32 }}
      className="inline-flex items-start justify-center overflow-hidden bg-black text-white"
    >
      <div ref={ref} className="w-max">
        <AnimatePresence mode="popLayout" initial={false}>
          <motion.div
            key={view}
            initial={reduce ? { opacity: 0 } : { opacity: 0, scale: 0.9, y: -8, filter: "blur(5px)" }}
            animate={reduce ? { opacity: 1 } : { opacity: 1, scale: 1, y: 0, filter: "blur(0px)" }}
            exit={
              reduce
                ? { opacity: 0, transition: { duration: 0.1 } }
                : { opacity: 0, scale: 0.9, y: -6, transition: { duration: 0.08 } }
            }
            transition={reduce ? { duration: 0.15 } : CONTENT}
            style={{ transformOrigin: "top center" }}
          >
            {children}
          </motion.div>
        </AnimatePresence>
      </div>
    </motion.div>
  );
}

Pass a different view key and different children, and the island morphs between them. The role="status" and aria-live mean screen readers announce the new content, like a call or a timer.

Or install it

If you use shadcn/ui, the full component is one command:

npx shadcn@latest add @beui/dynamic-island

<DynamicIsland view={view} compact={<span>9:41</span>}>
  <DynamicIslandView id="call">Incoming call</DynamicIslandView>
  <DynamicIslandView id="music">Midnight City</DynamicIslandView>
</DynamicIsland>

Set view to a view's id to open it, or null to go back to the compact pill. The source lands in your project, so you can change anything.

Demo and docs: beui.dev/components/blocks/dynamic-island
Source: github.com/starc007/ui-components

If you've built one of these and found a better trick for the exit, I'd like to hear it in the comments.

Reduced motion in Framer Motion: what I learned adding it to 150+ files

Saurabh Chauhan — Thu, 12 Nov 2026 14:03:11 +0000

Most sites handle reduced motion with one CSS rule. beUI's site has it too:

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

It's worth having, but on a Framer Motion site it isn't enough. Turn on "Reduce motion" with only this rule in place, and drawers still slide in, tabs still spring and counters still roll.

That CSS only shortens CSS animations and transitions. Framer Motion works out each frame of a spring in JavaScript and writes the result to the element's style, so the media query never sees it.

I build beUI, a library of animated React components, and more than 150 of its files now read the reduced motion setting. Here's what I learned doing that.

Start with the hook, and handle `null`

import { useReducedMotion } from "motion/react";

const reduce = useReducedMotion() ?? false;

useReducedMotion() returns true when the setting is on. It returns null during server rendering, because the server can't know. The ?? false gives you a plain boolean, so you don't have to remember the third case everywhere.

Pattern 1: fade, don't freeze

Reduced motion doesn't mean no animation. People turn the setting on because movement makes them dizzy or sick: sliding, scaling, spinning, parallax. A short fade doesn't cause that, and it still shows that something changed.

So keep the opacity and drop the transform:

<motion.div
  initial={reduce ? { opacity: 0 } : { opacity: 0, y: 12, scale: 0.96 }}
  animate={{ opacity: 1, y: 0, scale: 1 }}
  exit={reduce ? { opacity: 0 } : { opacity: 0, y: 8, scale: 0.98 }}
  transition={reduce ? { duration: 0.15 } : { type: "spring", duration: 0.4, bounce: 0.2 }}
/>

Swap the spring for a short tween too. Even a fade feels odd when it wobbles.

For a component with a lot of motion children, you don't need to branch every one. beUI's tabs wrap the whole thing once:

<MotionConfig transition={reduce ? { duration: 0 } : transition}>
  {/* the sliding pill and every child animation */}
</MotionConfig>

Pattern 2: some interactions need a different design

Turning off a transform works for a toast. It doesn't work for an iOS-style wheel picker, where the whole point is a drum you fling and watch spin.

If you only remove the animation, you get a drum that jumps between values, which is confusing. So under reduced motion, beUI's wheel picker renders something else entirely: a plain list of buttons in a scroll container with CSS snap points. Same options, same value, same onValueChange, and nothing spins.

Even the sound changed. The drum plays a tick for every row it passes. The reduced version has no rows passing, so it plays one tick when the value is picked.

Ask what the movement is for. If it's the interaction itself, design a calm version of it instead of switching it off.

Pattern 3: decoration just turns off

Some motion only exists to look nice. Under reduced motion it goes away completely:

Magnetic buttons that follow the cursor stay still.
Parallax layers get no transform and scroll with the page.
Smooth scrolling (beUI uses Lenis) turns off and falls back to the browser's normal scroll, and scrollTo jumps straight to the target.

const style = reduce ? {} : { y: drift };

Nobody misses a parallax effect, but plenty of people feel sick from one.

Pattern 4: check everything you start yourself

The hook only helps where you check it. These are easy to miss:

Imperative animations. An animate() call inside a useEffect ignores MotionConfig and your variants. Return early when reduce is on.
Native smooth scroll. element.scrollBy({ behavior: "smooth" }) is motion too. beUI's tabs use behavior: reduce ? "instant" : "smooth" when scrolling a tab into view.
requestAnimationFrame loops. Same deal, check the flag before you start.

What about `MotionConfig reducedMotion="user"`?

<MotionConfig reducedMotion="user">{children}</MotionConfig>

This tells Framer Motion to follow the device setting and skip transform and layout animations for everything inside it. It's a good safety net, and you should add it.

But it can't do pattern 2. It doesn't know your wheel picker should become a list. It also doesn't reach the imperative code in pattern 4. Treat it as the floor, and use the hook where a component needs real thought.

How to test it

macOS: System Settings, Accessibility, Display, Reduce motion.
Windows: Settings, Accessibility, Visual effects, Animation effects off.
Chrome DevTools: Command menu (Cmd/Ctrl+Shift+P), type "reduced motion", pick "Emulate CSS prefers-reduced-motion: reduce". useReducedMotion picks this up too.

Then click through the whole page, not just the component you changed. Overlays, counters and scroll effects are the usual stragglers.

The short version

CSS can't stop JavaScript springs. Use useReducedMotion() ?? false.
Keep fades, drop movement.
If the movement is the interaction, design a calm version.
Turn decoration off completely.
Check every animation you start by hand.

beUI's components are built with these rules, so if you'd rather not do this work yourself, you can install them with the shadcn CLI:

npx shadcn@latest add @beui/<component>

Source is on GitHub. And if you use reduced motion yourself, I'd like to hear which animations bother you most.