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>Blog · 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-32 pb-24 px-6 min-h-screen text-white"> <div class="max-w-3xl mx-auto"> <header class="mb-16"> <h1 class="text-4xl md:text-5xl font-bold tracking-[-0.02em] mb-3">Writing</h1> <p class="text-[#888888] text-base">Notes on building TinyRec, indie software, and what's working.</p> </header> <ul class="space-y-10"> <li class="group"> <a href="/blog/tinyrec-0-1-5/" class="block"> <time class="block text-[11px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-2"> May 10, 2026 </time> <h2 class="text-xl md:text-2xl font-semibold text-white group-hover:text-white/80 transition-colors leading-snug"> TinyRec 0.1.5: camera segments on the timeline, region recording fixes, and a guides site </h2> <p class="mt-2 text-[15px] text-[#888888] leading-relaxed"> Hide or push the camera fullscreen at any moment in your timeline, region recording exports without black bars, the trim-from-left bug is gone, and there's a full /guides site now. </p> <span class="mt-3 inline-flex items-center gap-1.5 text-[13px] text-white/60 group-hover:text-white transition-colors"> 13Read post <span aria-hidden>â</span> </span> </a> </li><li class="group"> <a href="/blog/tinyrec-0-1-4-iphone-recording/" class="block"> <time class="block text-[11px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-2"> May 8, 2026 </time> <h2 class="text-xl md:text-2xl font-semibold text-white group-hover:text-white/80 transition-colors leading-snug"> TinyRec 0.1.4: record your iPhone, frame it like a phone, and a sharper editor </h2> <p class="mt-2 text-[15px] text-[#888888] leading-relaxed"> Plug an iPhone in over USB and capture its screen at native resolution, wrap the recording in a real device bezel, and a pile of editor polish on top. </p> <span class="mt-3 inline-flex items-center gap-1.5 text-[13px] text-white/60 group-hover:text-white transition-colors">
14Read post <span aria-hidden>â</span> </span> </a> </li><li class="group"> <a href="/blog/da-nang-indie-hacker-hub/" class="block"> <time class="block text-[11px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-2"> May 3, 2026 </time> <h2 class="text-xl md:text-2xl font-semibold text-white group-hover:text-white/80 transition-colors leading-snug"> Da Nang is quietly becoming an indie hacker hub </h2> <p class="mt-2 text-[15px] text-[#888888] leading-relaxed"> Tony Dinh, Minh-Phuc Tran, the Hacker Residency Group â why a slice of indie devs in 2026 are flying to central Vietnam instead of San Francisco. </p> <span class="mt-3 inline-flex items-center gap-1.5 text-[13px] text-white/60 group-hover:text-white transition-colors"> 15Read post <span aria-hidden>â</span> </span> </a> </li><li class="group"> <a href="/blog/rust-video-exporter/" class="block"> <time class="block text-[11px] font-mono uppercase tracking-[0.16em] text-[#636366] mb-2"> May 3, 2026 </time> <h2 class="text-xl md:text-2xl font-semibold text-white group-hover:text-white/80 transition-colors leading-snug"> PixiJS was killing my video exports. So I rewrote the pipeline in Rust. </h2> <p class="mt-2 text-[15px] text-[#888888] leading-relaxed"> How TinyRec's video export went from 15 minutes to 1 minute, and why a Rust binary inside an Electron app was the right call. </p> <span class="mt-3 inline-flex items-center gap-1.5 text-[13px] text-white/60 group-hover:text-white transition-colors"> 16Read post <span aria-hidden>â</span> </span> </a> </li> </ul> <p class="mt-16 text-[12px] font-mono text-[#636366]"> <a href="/rss.xml" class="hover:text-white transition-colors">RSS</a> </p> </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#deb0bfb3f0aaacbfb0b5b6bfb0b6f0a8b09eb9b3bfb7b2f0bdb1b3" 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
161.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 17 reviewed. Locale-prefixed routes still resolve directly. --> <!-- <LanguageSwitcher 18 currentLocale={currentLocale} 19 currentUrl={currentUrl} 20 ariaLabel={t.languageSwitcher.ariaLabel} 21 variant="footer" 22 /> --> </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;"> 23TinyRec.io 24</span> </div> </div> </footer>
vendor: 110 bytes, line 24
24 <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>
24<script defer data-website-id="dfid_SYbNDezmtdER2G74ciDyG" data-domain="tinyrec.io" src="https://datafa.st/js/script.js"></script>
24
24<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>
24 25</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.