feat: Add useExtracted (experimental)

docs/src/components/BlogVideo.tsx

@@ -0,0 +1,8 @@
+import {ComponentProps} from 'react';
+import Video from './Video';
+
+export default function BlogVideo(
+  props: Omit<ComponentProps<typeof Video>, 'className'>
+) {
+  return <Video className="-mx-3 my-5 xl:-mx-6 xl:my-8" {...props} />;
+}

docs/src/components/Footer.tsx

@@ -26,14 +26,14 @@ export default function Footer() {
           <FooterVersionSelector />
         </div>
         <div>
-          <FooterLink href={config.blueskyUrl} target="_blank">
-            Bluesky
-          </FooterLink>
-          <FooterSeparator />
           <FooterLink href={config.xUrl} target="_blank">
             X
           </FooterLink>
           <FooterSeparator />
+          <FooterLink href={config.blueskyUrl} target="_blank">
+            Bluesky
+          </FooterLink>
+          <FooterSeparator />
           <FooterLink href={config.githubUrl} target="_blank">
             GitHub
           </FooterLink>

docs/src/components/StayUpdated.mdx

@@ -2,5 +2,5 @@
 
 **Let's keep in touch:**
 
-- [Bluesky (Jan Amann)](https://bsky.app/profile/amann.work)
 - [X (Jan Amann)](https://x.com/jamannnnnn)
+- [Bluesky (Jan Amann)](https://bsky.app/profile/amann.work)

docs/src/components/Video.tsx

@@ -0,0 +1,99 @@
+/* eslint-disable jsx-a11y/media-has-caption */
+import clsx from 'clsx';
+import {ComponentProps, useEffect, useRef, useState} from 'react';
+import useIsMobile from '../hooks/useIsMobile';
+
+export default function Video({
+  className,
+  ...props
+}: Omit<ComponentProps<'video'>, 'controls'>) {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const [isPlaying, setIsPlaying] = useState(false);
+  const isMobile = useIsMobile();
+
+  function onTogglePlay() {
+    setIsPlaying(!isPlaying);
+  }
+
+  function handleVideoEnd() {
+    setIsPlaying(false);
+  }
+
+  function handleVideoPlay() {
+    setIsPlaying(true);
+  }
+
+  function handleVideoPause() {
+    setIsPlaying(false);
+  }
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (isPlaying) {
+      video.play();
+    } else {
+      video.pause();
+    }
+  }, [isPlaying]);
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    function handlePlayEvent() {
+      handleVideoPlay();
+    }
+
+    function handlePauseEvent() {
+      handleVideoPause();
+    }
+
+    function handleEndedEvent() {
+      handleVideoEnd();
+    }
+
+    video.addEventListener('play', handlePlayEvent);
+    video.addEventListener('pause', handlePauseEvent);
+    video.addEventListener('ended', handleEndedEvent);
+
+    return () => {
+      video.removeEventListener('play', handlePlayEvent);
+      video.removeEventListener('pause', handlePauseEvent);
+      video.removeEventListener('ended', handleEndedEvent);
+    };
+  }, []);
+
+  return (
+    <div className={clsx('relative', className)}>
+      <video
+        ref={videoRef}
+        className="w-full cursor-pointer rounded-lg shadow-lg"
+        controls={isMobile}
+        {...props}
+      />
+      {!isMobile && (
+        <button
+          aria-label={isPlaying ? 'Pause video' : 'Play video'}
+          className={clsx(
+            'absolute inset-0 flex items-center justify-center rounded-lg bg-black/10 transition-all hover:bg-black/20',
+            isPlaying
+              ? 'transition-duration-500 opacity-0'
+              : 'transition-duration-200 opacity-100'
+          )}
+          onClick={onTogglePlay}
+          type="button"
+        >
+          <svg
+            className="h-16 w-16 text-white"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path d="M8 5v14l11-7z" />
+          </svg>
+        </button>
+      )}
+    </div>
+  );
+}

docs/src/hooks/useIsMobile.tsx

@@ -0,0 +1,21 @@
+import {useEffect, useState} from 'react';
+
+export default function useIsMobile() {
+  const [isMobile, setIsMobile] = useState(false);
+
+  useEffect(() => {
+    function checkMobile() {
+      setIsMobile(window.innerWidth < 768 || 'ontouchstart' in window);
+    }
+
+    checkMobile();
+
+    window.addEventListener('resize', checkMobile);
+
+    return () => {
+      window.removeEventListener('resize', checkMobile);
+    };
+  }, []);
+
+  return isMobile;
+}

docs/src/pages/api/og-image.tsx

@@ -112,7 +112,8 @@ export default async function OG(req: Request) {
               lineHeight: 1.1,
               letterSpacing: -2,
               marginRight: 12,
-              fontWeight: 500
+              fontWeight: 500,
+              color: '#55556D'
             }}
           >
             {subtitle}

docs/src/pages/blog/_meta.tsx

@@ -2,6 +2,10 @@ export default {
   index: {
     title: 'Overview'
   },
+  'use-extracted': {
+    title: 'useExtracted: The Tailwind of i18n?',
+    display: 'hidden'
+  },
   'next-intl-4-0': {
     title: 'next-intl 4.0',
     display: 'hidden'

docs/src/pages/blog/index.mdx

@@ -4,6 +4,12 @@ import StayUpdated from '@/components/StayUpdated.mdx';
 # next-intl blog
 
 <div className="flex flex-col gap-4 py-8">
+  <BlogPostLink
+    href="/blog/use-extracted"
+    title="useExtracted: The Tailwind of i18n?"
+    date="Nov 7, 2025"
+    author="By Jan Amann"
+  />
   <BlogPostLink
     href="/blog/next-intl-4-0"
     title="next-intl 4.0"