Fill mode

import { useLayoutEffect, useRef } from 'react';

const features = [
  { title: 'Live preview', text: 'See every change the moment it lands.' },
  { title: 'One-click publish', text: 'Put your app online with a link.' },
  { title: 'Built-in database', text: 'Save data without running a server.' }
];

export function FeatureGrid() {
  const listRef = useRef<HTMLUListElement>(null);

  // A layout effect starts the animations before the first paint.
  useLayoutEffect(() => {
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const cards = Array.from(listRef.current?.children ?? []);
    const animations = cards.map((card, index) =>
      card.animate(
        [
          { opacity: 0, transform: 'translateY(16px)' },
          { opacity: 1, transform: 'translateY(0)' }
        ],
        // 'both': show the first keyframe during the delay (backwards)
        // and keep the last one after the animation ends (forwards).
        { duration: 500, delay: index * 100, easing: 'ease-out', fill: 'both' }
      )
    );
    return () => animations.forEach((animation) => animation.cancel());
  }, []);

  return (
    <ul ref={listRef} className='grid gap-4 sm:grid-cols-3'>
      {features.map((feature) => (
        <li key={feature.title} className='rounded-xl border bg-background p-5'>
          <h3 className='font-semibold'>{feature.title}</h3>
          <p className='mt-1 text-sm text-muted-foreground'>{feature.text}</p>
        </li>
      ))}
    </ul>
  );
}