PageSourceSearch

https://tinyrec.io/guides/

html tinyrec.io collected 2026-09-24 15:03:50 UTC 30,293 bytes, 43 lines download raw bytes

1<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="TinyRec – Supercharge your screen recordings with cursor effects, zoom, subtitles, and AI voice right in your browser."><link rel="icon" type="image/svg+xml" href="/favicon.svg"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet"><link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-mono/style.min.css" rel="stylesheet"><link rel="preload" href="/fonts/general-sans/GeneralSans-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/general-sans/GeneralSans-Semibold.woff2" as="font" type="font/woff2" crossorigin><title>Guides · TinyRec</title><!-- Google Analytics -->
vendor: 63 bytes, line 1
1<script async src="https://www.googletagmanager.com/gtag/js?id=
1G-DCB9Z4XVLR
vendor: 11 bytes, line 1
1"></script>
1<script>
2      
vendor: 162 bytes, lines 2-7
2window.dataLayer = window.dataLayer || [];
3      function gtag() {
4        dataLayer.push(arguments);
5      }
6      gtag("js", new Date());
7      gtag("config", "
7G-DCB9Z4XVLR
vendor: 8 bytes, lines 7-8
7");
8    
8</script>
8<link rel="stylesheet" href="/_astro/_slug_.oedqKAjc.css">
8<script type="module">const E=new IntersectionObserver(e=>{e.forEach(s=>{s.isIntersecting&&(s.target.classList.add("is-visible"),E.unobserve(s.target))})},{threshold:.08});document.querySelectorAll("[data-reveal], [data-reveal-group]").forEach(e=>E.observe(e));document.querySelectorAll(".distort-grid").forEach(e=>{const s=Array.from(e.querySelectorAll(".distort-card")),i=.55,y=28,f=12,A=.94,I=.45;let l=!1;e.addEventListener("mousemove",t=>{if(l)return;const{clientX:c,clientY:L}=t,o=e.getBoundingClientRect(),d=(c-o.left)/o.width,h=(L-o.top)/o.height;s.forEach(r=>{const a=r.getBoundingClientRect(),m=(a.left+a.width/2-o.left)/o.width,u=(a.top+a.height/2-o.top)/o.height,g=Math.sqrt((d-m)**2+(h-u)**2);if(g<i){const n=1-g/i,v=m-d,p=u-h;r.style.transform=`translate(${v*n*y}px, ${p*n*y}px) rotateX(${-p*n*f}deg) rotateY(${v*n*f}deg) scale(${1-(1-A)*n})`,r.style.opacity=String(1-(1-I)*n)}else r.style.transform="",r.style.opacity=""})}),s.forEach(t=>{t.addEventListener("mouseenter",()=>{l=!0,s.forEach(c=>{c.style.transform="",c.style.opacity=""}),t.style.opacity="1"}),t.addEventListener("mouseleave",()=>{l=!1,t.style.transform="",t.style.opacity=""})}),e.addEventListener("mouseleave",()=>{l=!1,s.forEach(t=>{t.style.transform="",t.style.opacity=""})})});
9</script>
9</head> <body class="font-sans antialiased">  <nav class="fixed top-0 w-full z-50 border-b border-[rgba(255,255,255,0.08)] bg-black/95 backdrop-blur-sm"> <div class="max-w-6xl mx-auto px-6 h-14 flex items-center justify-between"> <a href="/" class="flex items-center gap-2.5"> <img src="/images/icon-white.svg" alt="TinyRec" class="w-7 h-7"> <span class="font-semibold text-[15px] text-white">TinyRec</span> </a> <div class="hidden md:flex items-center gap-7 text-sm text-[#888888]"> <a href="/#how-it-works" class="hover:text-white transition-colors duration-150">How it works</a> <a href="/#auto-zoom" class="hover:text-white transition-colors duration-150">Features</a> <a href="/#pricing" class="hover:text-white transition-colors duration-150">Pricing</a> <a href="/guides/" class="hover:text-white transition-colors duration-150">Guides</a> <a href="/blog/" class="hover:text-white transition-colors duration-150">Blog</a> </div> <div class="flex items-center gap-4"> <!-- Language switcher hidden until vi/zh translations are
10           reviewed. The locale-prefixed routes (`/vi/`, `/zh/`) still
11           build and resolve directly if visited; we just don't expose
12           the picker in the public nav yet. --> <a href="https://github.com/davidtran/tinyrec-release/releases/latest/download/TinyRec-Mac-arm64-Installer.dmg" class="flex items-center gap-1.5 px-5 py-2 bg-white hover:bg-[#f0f0f0] text-black text-sm font-semibold rounded-full transition-colors duration-150"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" fill="currentColor" aria-hidden="true" class="w-4 h-4"> <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"></path> </svg> Download </a> </div> </div> </nav> <main class="pt-24 pb-24 px-6 text-white"> <div class="max-w-6xl mx-auto flex flex-col md:flex-row gap-10"> <aside class="guides-sidebar w-full md:w-64 md:flex-shrink-0">  <button type="button" data-guides-toggle aria-expanded="false" aria-controls="guides-sidebar-list" class="md:hidden flex items-center justify-between w-full px-4 py-3 mb-3 rounded-md border border-white/[0.08] bg-white/[0.03] text-sm text-white hover:bg-white/[0.06] transition-colors"> <span class="flex items-center gap-3 min-w-0"> <span class="text-[11px] font-mono uppercase tracking-[0.16em] text-[#888888] shrink-0">
13Guides
14</span>  </span> <svg class="w-4 h-4 text-[#888888] transition-transform shrink-0 ml-3" data-guides-chevron viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"> <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z" clip-rule="evenodd"></path> </svg> </button>  <nav id="guides-sidebar-list" class="hidden md:block md:sticky md:top-20"> <a href="/guides/" class="block px-3 py-2 mb-6 text-[12px] font-mono uppercase tracking-[0.16em] rounded-md transition-colors text-white bg-white/[0.06]">
15← All guides
16</a> <section class="mb-7"> <h3 class="px-3 mb-2 text-[15px] font-semibold text-white tracking-[-0.005em]"> Getting Started </h3> <ul class="ml-2 border-l border-white/[0.06]"> <li> <a href="/guides/install-macos/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Install on macOS </a> </li><li> <a href="/guides/first-launch-permissions/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Grant permissions on first launch </a> </li><li> <a href="/guides/your-first-recording/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Record your first video </a> </li><li> <a href="/guides/recording/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Customize your recording </a> </li><li> <a href="/guides/multi-scene-script-flow/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Write a script with multiple scenes </a> </li><li> <a href="/guides/app-overview/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> App overview — Home, Recorder, Editor </a> </li><li> <a href="/guides/privacy-and-data/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Your data stays on your Mac — our privacy promise </a> </li> </ul> </section><section class="mb-7"> <h3 class="px-3 mb-2 text-[15px] font-semibold text-white tracking-[-0.005em]"> Editor </h3> <ul class="ml-2 border-l border-white/[0.06]"> <li> <a href="/guides/editor-overview/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Editor overview </a> </li><li> <a href="/guides/timeline-and-trimming/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Timeline </a> </li><li> <a href="/guides/zoom/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Zoom </a> </li><li> <a href="/guides/style/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Style your video </a> </li><li> <a href="/guides/camera/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Camera </a> </li><li> <a href="/guides/audio-editing/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Audio editing </a> </li><li> <a href="/guides/device-frame-iphone-bezel/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Wrap your video in an iPhone bezel </a> </li><li> <a href="/guides/export/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Export </a> </li> </ul> </section><section class="mb-7"> <h3 class="px-3 mb-2 text-[15px] font-semibold text-white tracking-[-0.005em]"> Advanced </h3> <ul class="ml-2 border-l border-white/[0.06]"> <li> <a href="/guides/subtitles/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Subtitles </a> </li><li> <a href="/guides/voiceover/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> Voiceover </a> </li> </ul> </section><section class="mb-7"> <h3 class="px-3 mb-2 text-[15px] font-semibold text-white tracking-[-0.005em]"> Troubleshooting </h3> <ul class="ml-2 border-l border-white/[0.06]"> <li> <a href="/guides/iphone-not-detected/" class="block px-3 py-1.5 -ml-px text-[13px] leading-snug border-l-2 transition-colors border-transparent text-[#888888] hover:text-white hover:border-white/[0.2]"> iPhone not detected </a> </li> </ul> </section> </nav> </aside> 
16<script>
17  (function () {
18    const toggle = document.querySelector('[data-guides-toggle]');
19    if (!toggle) return;
20    const list = document.getElementById('guides-sidebar-list');
21    const chevron = toggle.querySelector('[data-guides-chevron]');
22    if (!list) return;
23
24    toggle.addEventListener('click', () => {
25      const isHidden = list.classList.toggle('hidden');
26      toggle.setAttribute('aria-expanded', String(!isHidden));
27      if (chevron) chevron.style.transform = isHidden ? '' : 'rotate(180deg)';
28    });
29  })();
30</script>
30 <div class="flex-1 min-w-0"> <header class="mb-10"> <h1 class="text-3xl md:text-5xl font-bold tracking-[-0.02em] leading-[1.1] mb-3">
31Guides
32</h1> <p class="text-[15px] text-[#888888] max-w-xl leading-relaxed">
33Everything from your first install to a polished export. Pick a section below or use the sidebar.
34</p> </header> <div class="grid grid-cols-1 sm:grid-cols-2 gap-3"> <a href="#getting-started" class="block p-5 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04] hover:border-white/[0.12] transition-colors"> <h2 class="text-[15px] font-semibold mb-1.5">Getting Started</h2> <p class="text-[13px] text-[#888888]"> 7 articles </p> </a><a href="#editor" class="block p-5 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04] hover:border-white/[0.12] transition-colors"> <h2 class="text-[15px] font-semibold mb-1.5">Editor</h2> <p class="text-[13px] text-[#888888]"> 8 articles </p> </a><a href="#advanced" class="block p-5 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04] hover:border-white/[0.12] transition-colors"> <h2 class="text-[15px] font-semibold mb-1.5">Advanced</h2> <p class="text-[13px] text-[#888888]"> 2 articles </p> </a><a href="#troubleshooting" class="block p-5 rounded-xl border border-white/[0.06] bg-white/[0.02] hover:bg-white/[0.04] hover:border-white/[0.12] transition-colors"> <h2 class="text-[15px] font-semibold mb-1.5">Troubleshooting</h2> <p class="text-[13px] text-[#888888]"> 1 article </p> </a> </div> <section id="getting-started" class="mt-14"> <h2 class="text-[12px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-4"> Getting Started </h2> <ul class="space-y-2"> <li> <a href="/guides/install-macos/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Install on macOS</div> <div class="text-[13px] text-[#888888] leading-snug">Download TinyRec, drag it into Applications, and open it for the first time.</div> </a> </li><li> <a href="/guides/first-launch-permissions/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Grant permissions on first launch</div> <div class="text-[13px] text-[#888888] leading-snug">Screen Recording, Accessibility, Camera, Microphone — what TinyRec asks for and why.</div> </a> </li><li> <a href="/guides/your-first-recording/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Record your first video</div> <div class="text-[13px] text-[#888888] leading-snug">Open TinyRec, pick a screen, hit record, and end up with a finished MP4 — in five minutes.</div> </a> </li><li> <a href="/guides/recording/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Customize your recording</div> <div class="text-[13px] text-[#888888] leading-snug">Set up a take in the recording dashboard — pick your source, dial in the mic and camera, and stop cleanly. The full reference for everything before you hit record.</div> </a> </li><li> <a href="/guides/multi-scene-script-flow/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Write a script with multiple scenes</div> <div class="text-[13px] text-[#888888] leading-snug">Plan a multi-scene project, then record each scene against its script — with a teleprompter that&#39;s invisible to viewers.</div> </a> </li><li> <a href="/guides/app-overview/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">App overview — Home, Recorder, Editor</div> <div class="text-[13px] text-[#888888] leading-snug">TinyRec has three main surfaces. Here&#39;s what each one does and how to move between them.</div> </a> </li><li> <a href="/guides/privacy-and-data/" class="block py-3 px-4 roun
34ded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Your data stays on your Mac — our privacy promise</div> <div class="text-[13px] text-[#888888] leading-snug">TinyRec runs 100% offline. Your recordings, transcripts, and edits never leave your Mac. Here&#39;s the full list of exceptions.</div> </a> </li> </ul> </section><section id="editor" class="mt-14"> <h2 class="text-[12px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-4"> Editor </h2> <ul class="space-y-2"> <li> <a href="/guides/editor-overview/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Editor overview</div> <div class="text-[13px] text-[#888888] leading-snug">A tour of the TinyRec editor — preview canvas, timeline, settings panel — and how the three regions work together.</div> </a> </li><li> <a href="/guides/timeline-and-trimming/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Timeline</div> <div class="text-[13px] text-[#888888] leading-snug">The timeline is the editor&#39;s centre of gravity. Every cut, zoom, mask, annotation and audio tweak lives on it as a discrete segment you can move, resize, or delete.</div> </a> </li><li> <a href="/guides/zoom/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Zoom</div> <div class="text-[13px] text-[#888888] leading-snug">Zoom segments are how TinyRec brings the camera in close. Auto by default — the app detects where to focus from your cursor. Switch any segment to manual to pin a fixed focus region for its whole duration.</div> </a> </li><li> <a href="/guides/style/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Style your video</div> <div class="text-[13px] text-[#888888] leading-snug">Wallpaper, padding, corner roundness, shadow, blur — everything that lives between your screen recording and the edge of the frame.</div> </a> </li><li> <a href="/guides/camera/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Camera</div> <div class="text-[13px] text-[#888888] leading-snug">Show or hide the camera bubble, change its size, position, shape and crop, and push it to fullscreen on specific segments — all without re-recording.</div> </a> </li><li> <a href="/guides/audio-editing/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Audio editing</div> <div class="text-[13px] text-[#888888] leading-snug">Mix system audio and microphone, clean up the recording with one-click noise reduction, and lay a music bed underneath — built-in library or your own file.</div> </a> </li><li> <a href="/guides/device-frame-iphone-bezel/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Wrap your video in an iPhone bezel</div> <div class="text-[13px] text-[#888888] leading-snug">Drop a real iPhone frame around your iOS screen recording — pick a model, pick a colour, ship it. No iPad or Android frames yet.</div> </a> </li><li> <a href="/guides/export/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Export</div> <div class="text-[13px] text-[#888888] leading-snug">Click Export, pick a quality, save the MP4. What you see in the editor preview is what ships in the file.</div> </a> </li> </ul> </section><section id="advanced" class="mt-14"> <h2 class="text-[12px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-4"> Advanced </h2> <ul class="space-y-2"> <li>
34 <a href="/guides/subtitles/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Subtitles</div> <div class="text-[13px] text-[#888888] leading-snug">Auto-generate captions from your audio with local Whisper, then style and edit them to match your brand. Runs entirely on-device — no cloud, no per-minute charge.</div> </a> </li><li> <a href="/guides/voiceover/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">Voiceover</div> <div class="text-[13px] text-[#888888] leading-snug">Translate your subtitles into any language and generate an AI voice track for them. Four steps from a transcribed recording to a fully localized version.</div> </a> </li> </ul> </section><section id="troubleshooting" class="mt-14"> <h2 class="text-[12px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-4"> Troubleshooting </h2> <ul class="space-y-2"> <li> <a href="/guides/iphone-not-detected/" class="block py-3 px-4 rounded-lg border border-white/[0.04] hover:border-white/[0.12] hover:bg-white/[0.03] transition-colors"> <div class="text-[14px] font-semibold text-white mb-0.5">iPhone not detected</div> <div class="text-[13px] text-[#888888] leading-snug">Wired iPhone not appearing in TinyRec&#39;s source picker? Four checks usually cover it: cable, iOS version, lock state, and the macOS &quot;Allow accessory&quot; prompt.</div> </a> </li> </ul> </section> </div> </div> </main> <footer class="border-t border-[rgba(255,255,255,0.06)] pt-16 pb-8 px-6"> <div class="max-w-6xl mx-auto"> <!-- Top: CTA + Link columns --> <div class="grid grid-cols-2 md:grid-cols-6 gap-10 md:gap-8 mb-16"> <!-- CTA column --> <div class="col-span-2"> <h3 class="text-xl font-semibold text-white mb-2">Give it a go</h3> <p class="text-[#888888] text-sm mb-1">TinyRec for macOS.</p> <a href="https://github.com/davidtran/tinyrec-release/releases/latest/download/TinyRec-Mac-arm64-Installer.dmg" class="inline-flex items-center gap-1.5 px-6 py-2.5 bg-white hover:bg-[#f0f0f0] text-black text-sm font-semibold rounded-full transition-colors duration-150"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 814 1000" fill="currentColor" aria-hidden="true" class="w-4 h-4"> <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"></path> </svg> Download for macOS </a> <p class="text-[10px] text-[#48484a] mt-3">macOS 13+ · Apple Silicon</p> </div> <!-- Product --> <div> <h4 class="text-xs font-semibold text-[#636366] uppercase tracking-widest mb-4"> Product </h4> <ul class="space-y-2.5"> <li> <a href="#how-it-works" class="text-sm text-[#888888] hover:text-white transition-colors"> How it works </a> </li><li> <a href="#auto-zoom" class="text-sm text-[#888888] hover:text-white transition-colors"> Auto Zoom </a> </li><li> <a href="#subtitles" class="text-sm text-[#888888] hover:text-white transition-colors"> Subtitles </a> </li><li> <a href="#voice-over" class="text-sm text-[#888888] hover:text-white transition-colors"> Voice Over </a> </li><li> <a href="#camera-overlay" class="text-sm text-[#888888] hover:text-white transition-colors"> Camera </a> </li><li> <a href="#annotations" class="text-sm text-[#888888] hover:text-white transition-colors"> Annotations </a> </li><li> <a href="#timeline" class="text-sm text-[#888888] hover:text-white transition-colors"> Timeline </a> </li><li> <a href="#pricing" class="text-sm text-[#888888] hover:text-white transition-colors"> Pricing </a> </li> </ul> </div> <!-- Guides --> <div> <h4 class="text-xs font-semibold text-[#636366] uppercase tracking-widest mb-4"> Guides </h4> <ul class="space-y-2.5"> <li> <a href="/guides/install-macos/" class="text-sm text-[#888888] hover:text-white transition-colors">Get started</a> </li> <li> <a href="/guides/editor-overview/" class="text-sm text-[#888888] hover:text-white transition-colors">Editor</a> </li> <li> <a href="/guides/subtitles/" class="text-sm text-[#888888] hover:text-white transition-colors">Advanced</a> </li> <li> <a href="/guides/iphone-not-detected/" class="text-sm text-[#888888] hover:text-white transition-colors">Troubleshooting</a> </li> </ul> </div> <!-- Say hi --> <div> <h4 class="text-xs font-semibold text-[#636366] uppercase tracking-widest mb-4"> Say hi </h4> <ul class="space-y-2.5"> <li> <a href="https://x.com/davidtranwd" target="_blank" rel="noopener" class="text-sm text-[#888888] hover:text-white transition-colors">@davidtranwd on X</a> </li> <li> <a href="https://discord.gg/fV8SCzBnhS" target="_blank" rel="noopener" class="text-sm text-[#888888] hover:text-white transition-colors">Discord community</a> </li> <li> <a href="#founder" class="text-sm text-[#888888] hover:text-white transition-colors">About the maker</a> </li> <li> <a href="#faq" class="text-sm text-[#888888] hover:text-white transition-colors">FAQ</a> </li> <li> <a href="/cdn-cgi/l/email-protection#e38d828ecd9791828d888b828d8bcd958da3848e828a8fcd808c8e" class="text-sm text-[#888888] hover:text-white transition-colors">Email</a> </li> </ul> </div> <!-- Legal --> <div> <h4 class="text-xs font-semibold text-[#636366] uppercase tracking-widest mb-4"> Legal </h4> <ul class="space-y-2.5"> <li> <a href="#" class="text-sm text-[#888888] hover:text-white transition-colors">Privacy</a> </li> <li> <a href="#" class="text-sm text-[#888888] hover:text-white transition-colors">Terms</a> </li> </ul> </div> </div> <!-- Divider --> <div class="border-t border-[rgba(255,255,255,0.06)] mb-8"></div> <!-- Copyright --> <div class="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 mb-16"> <div class="flex items-center gap-2.5"> <img src="/images/icon-white.svg" alt="TinyRec" class="w-5 h-5"> <span class="text-[#48484a] text-xs">Made by <a href="https://x.com/davidtranwd" target="_blank" rel="noopener" class="hover:text-white transition-colors">@davidtranwd</a> · © 2026 TinyRec</span> </div> <div class="flex items-center gap-5"> <a href="https://discord.gg/fV8SCzBnhS" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-xs text-[#888888] hover:text-white transition-colors" aria-label="Join Discord"> <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor" aria-hidden="true"> <path d="M20.317 4.37a19.79 19.79 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 
341.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.331c-1.182 0-2.157-1.085-2.157-2.418 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.332-.956 2.417-2.157 2.417zm7.975 0c-1.183 0-2.157-1.085-2.157-2.418 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.332-.946 2.417-2.157 2.417z"></path> </svg> Join Discord </a> <a href="https://x.com/davidtranwd" target="_blank" rel="noopener" class="inline-flex items-center gap-2 text-xs text-[#888888] hover:text-white transition-colors" aria-label="Follow on X"> <svg viewBox="0 0 24 24" class="w-4 h-4" fill="currentColor" aria-hidden="true"> <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path> </svg> Follow on X </a> <!-- Language switcher hidden until vi/zh translations are
35             reviewed. Locale-prefixed routes still resolve directly. --> <!-- <LanguageSwitcher
36          currentLocale={currentLocale}
37          currentUrl={currentUrl}
38          ariaLabel={t.languageSwitcher.ariaLabel}
39          variant="footer"
40        /> --> </div> </div> <!-- Big gradient brand text --> <div class="text-center select-none overflow-hidden"> <span class="text-[18vw] md:text-[14vw] lg:text-[12vw] font-extrabold leading-none tracking-[-0.04em] bg-clip-text text-transparent" style="background: linear-gradient(to bottom, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.08) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
41TinyRec.io
42</span> </div> </div> </footer>
vendor: 110 bytes, line 42
42  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
42<script defer data-website-id="dfid_SYbNDezmtdER2G74ciDyG" data-domain="tinyrec.io" src="https://datafa.st/js/script.js"></script>
42  
42<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"7b4faaacd9354da7aba070159c1096ff","r":1,"spa":2}' crossorigin="anonymous"></script>
42
43</body> </html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.