Spaces:
Running
Running
File size: 19,510 Bytes
ac5ef50 | 1 | <!DOCTYPE html><html lang="en" class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.0.q-h669a_dqa.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.16t1db8_9y2o~.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" as="image" href="/assets/images/Sea.png"/><link rel="preload" as="image" href="/assets/images/Boxing.png"/><link rel="stylesheet" href="/_next/static/chunks/0no26hx37ejgo.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/0ht900cau6_ur.js"/><script src="/_next/static/chunks/06~f4cvc3b8e~.js" async=""></script><script src="/_next/static/chunks/0n~dq4kpx9xxx.js" async=""></script><script src="/_next/static/chunks/turbopack-0cd6qyn3iwjya.js" async=""></script><script src="/_next/static/chunks/0dbhjjzl8qfwv.js" async=""></script><script src="/_next/static/chunks/0obd6q5_c4.8u.js" async=""></script><meta name="next-size-adjust" content=""/><title>Motion Trace</title><meta name="description" content="Turn your videos into memory. Generate elegant visual trails, soft echoes, and flowing afterimages that follow every frame giving your videos a cinematic depth that feels alive and intentional."/><link rel="icon" href="/favicon.ico?favicon.0x3dzn~oxb6tn.ico" sizes="256x256" type="image/x-icon"/><script src="/_next/static/chunks/03~yq9q893hmn.js" noModule=""></script></head><body class="min-h-full flex flex-col"><div hidden=""><!--$--><!--/$--></div><div class="jsx-60e53460599086e3 fixed inset-0 overflow-hidden bg-[#030303] font-sans text-white antialiased"><div class="jsx-60e53460599086e3 absolute inset-0 pointer-events-none z-0"><div class="jsx-60e53460599086e3 absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-full w-full bg-[radial-gradient(circle_at_center,var(--tw-gradient-stops))] from-purple-500/10 via-transparent to-transparent opacity-50"></div></div><canvas class="jsx-60e53460599086e3 h-full w-full object-cover transition-opacity duration-1000 opacity-0"></canvas><video loop="" muted="" playsInline="" crossorigin="anonymous" class="jsx-60e53460599086e3 hidden"></video><input type="file" accept="video/*" class="jsx-60e53460599086e3 hidden"/><div class="jsx-60e53460599086e3 fixed left-0 top-0 z-50 flex w-full items-center justify-end p-6 md:p-10 transition-all duration-700 -translate-y-20 opacity-0 pointer-events-none"><div class="jsx-60e53460599086e3 flex items-center gap-3"><button class="jsx-60e53460599086e3 flex h-10 items-center justify-center rounded-full bg-white/5 px-4 text-white backdrop-blur-xl border border-white/10 hover:bg-white/10 transition-all text-[10px] font-bold uppercase tracking-widest"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-refresh-cw mr-2" aria-hidden="true"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"></path><path d="M21 3v5h-5"></path><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"></path><path d="M8 16H3v5"></path></svg> New Video</button><button class="jsx-60e53460599086e3 flex h-10 items-center justify-center rounded-full px-6 transition-all active:scale-95 text-[10px] font-bold uppercase tracking-widest bg-white text-black hover:bg-zinc-200"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-download mr-2" aria-hidden="true"><path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path></svg>Export</button><button class="jsx-60e53460599086e3 group h-10 w-10 flex items-center justify-center rounded-full border border-white/10 backdrop-blur-xl transition-all duration-500 ease-out bg-white/5 hover:bg-white/10 hover:border-white/30"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings transition-transform duration-700 cubic-bezier(0.34, 1.56, 0.64, 1) rotate-0" aria-hidden="true"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg></button></div></div><div class="jsx-60e53460599086e3 absolute inset-0 z-40 overflow-y-auto scroll-smooth py-12 md:py-0 flex items-start md:items-center justify-center px-4 md:px-10 scrollbar-hide"><div class="jsx-60e53460599086e3 w-full max-w-6xl"><header class="jsx-60e53460599086e3 text-center mb-16 animate-in fade-in slide-in-from-top-4 duration-1000"><h2 class="jsx-60e53460599086e3 text-sm font-bold tracking-[0.6em] text-purple-500 uppercase mb-4">Turn motion into memory</h2><h1 class="jsx-60e53460599086e3 text-4xl md:text-7xl font-black uppercase tracking-tighter text-white leading-[0.9]">Motion Trace</h1></header><div class="jsx-60e53460599086e3 grid grid-cols-1 md:grid-cols-[1fr_auto_1.5fr] items-center gap-12 bg-zinc-900/40 border border-white/5 backdrop-blur-2xl rounded-[3rem] p-8 md:p-16 shadow-2xl"><div class="jsx-60e53460599086e3 flex flex-col items-center text-center space-y-8 group"><div class="jsx-60e53460599086e3 relative"><div class="jsx-60e53460599086e3 absolute inset-0 bg-purple-500/20 blur-3xl rounded-full group-hover:bg-purple-500/40 transition-all duration-500"></div><button class="jsx-60e53460599086e3 relative flex flex-col items-center justify-center w-48 h-48 rounded-full border border-white/10 bg-black/40 transition-all hover:border-purple-500/50 hover:scale-105 active:scale-95"><div class="jsx-60e53460599086e3 h-14 w-14 rounded-2xl bg-white/5 flex items-center justify-center mb-4 group-hover:bg-white text-white group-hover:text-black transition-colors"><svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus" aria-hidden="true"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg></div><span class="jsx-60e53460599086e3 text-[10px] font-black uppercase tracking-[0.2em]">Import Video</span></button></div><div class="jsx-60e53460599086e3 max-w-[200px]"><h3 class="jsx-60e53460599086e3 text-xs font-bold uppercase mb-2">Choose a File</h3><p class="jsx-60e53460599086e3 text-[10px] text-white/40 leading-relaxed uppercase tracking-tighter">Please select an MP4 file from your device to proceed</p></div></div><div class="jsx-60e53460599086e3 hidden md:flex flex-col items-center h-64 justify-center py-4"><div class="jsx-60e53460599086e3 w-px h-full border-l border-dashed border-white/20"></div><div class="jsx-60e53460599086e3 my-6 h-10 w-10 rounded-full border border-white/10 flex items-center justify-center bg-zinc-900 text-[10px] font-bold text-white/40">OR</div><div class="jsx-60e53460599086e3 w-px h-full border-l border-dashed border-white/20"></div></div><div class="jsx-60e53460599086e3 space-y-8"><div class="jsx-60e53460599086e3 flex items-center justify-between"><h3 class="jsx-60e53460599086e3 text-[11px] font-black uppercase tracking-[0.4em] text-white/60 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-video mr-3 text-purple-500" aria-hidden="true"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"></path><rect x="2" y="6" width="14" height="12" rx="2"></rect></svg> Presets</h3></div><div class="jsx-60e53460599086e3 grid grid-cols-1 sm:grid-cols-2 gap-6"><button class="jsx-60e53460599086e3 group relative h-48 overflow-hidden rounded-3xl border border-white/5 bg-zinc-950 transition-all hover:border-white/20 active:scale-[0.97]"><img src="/assets/images/Sea.png" alt="Observing the Sea" class="jsx-60e53460599086e3 absolute inset-0 h-full w-full object-cover opacity-40 grayscale group-hover:opacity-70 group-hover:grayscale-0 transition-all duration-700"/><div class="jsx-60e53460599086e3 absolute inset-0 bg-linear-to-t from-black via-black/20 to-transparent from-blue-600/40"></div><div class="jsx-60e53460599086e3 absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><div class="jsx-60e53460599086e3 h-12 w-12 rounded-full bg-white flex items-center justify-center text-black shadow-xl"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></div></div><div class="jsx-60e53460599086e3 absolute bottom-0 left-0 p-6 text-left"><p class="jsx-60e53460599086e3 text-[9px] font-black uppercase tracking-widest text-purple-400 mb-1">preset 1</p><h4 class="jsx-60e53460599086e3 text-sm font-black uppercase tracking-tight">Observing the Sea</h4></div></button><button class="jsx-60e53460599086e3 group relative h-48 overflow-hidden rounded-3xl border border-white/5 bg-zinc-950 transition-all hover:border-white/20 active:scale-[0.97]"><img src="/assets/images/Boxing.png" alt="Boxing" class="jsx-60e53460599086e3 absolute inset-0 h-full w-full object-cover opacity-40 grayscale group-hover:opacity-70 group-hover:grayscale-0 transition-all duration-700"/><div class="jsx-60e53460599086e3 absolute inset-0 bg-linear-to-t from-black via-black/20 to-transparent from-purple-600/40"></div><div class="jsx-60e53460599086e3 absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 translate-y-2 group-hover:translate-y-0"><div class="jsx-60e53460599086e3 h-12 w-12 rounded-full bg-white flex items-center justify-center text-black shadow-xl"><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-play" aria-hidden="true"><path d="M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z"></path></svg></div></div><div class="jsx-60e53460599086e3 absolute bottom-0 left-0 p-6 text-left"><p class="jsx-60e53460599086e3 text-[9px] font-black uppercase tracking-widest text-purple-400 mb-1">preset 2</p><h4 class="jsx-60e53460599086e3 text-sm font-black uppercase tracking-tight">Boxing</h4></div></button></div></div></div></div></div><div class="jsx-60e53460599086e3 fixed right-6 top-24 z-50 w-80 transition-all duration-700 ease-[cubic-bezier(0.23,1,0.32,1)] pointer-events-none translate-y-8 opacity-0 scale-95"><div class="jsx-60e53460599086e3 relative overflow-hidden rounded-4xl border border-white/10 bg-black/60 p-6 backdrop-blur-3xl shadow-2xl"><div class="jsx-60e53460599086e3 absolute -top-24 -left-24 h-48 w-48 bg-purple-500/10 blur-[80px] pointer-events-none"></div><div class="jsx-60e53460599086e3 relative z-10 space-y-8"><div class="jsx-60e53460599086e3 grid grid-cols-2 gap-2"><button class="jsx-60e53460599086e3 rounded-xl border py-3 text-[9px] font-bold uppercase tracking-widest transition-all duration-300 border-white bg-white text-black">Standard</button><button class="jsx-60e53460599086e3 rounded-xl border py-3 text-[9px] font-bold uppercase tracking-widest transition-all duration-300 border-white/5 bg-white/5 text-white/40 hover:bg-white/10 hover:text-white">Luminous</button><button class="jsx-60e53460599086e3 rounded-xl border py-3 text-[9px] font-bold uppercase tracking-widest transition-all duration-300 border-white/5 bg-white/5 text-white/40 hover:bg-white/10 hover:text-white">Shadow</button><button class="jsx-60e53460599086e3 rounded-xl border py-3 text-[9px] font-bold uppercase tracking-widest transition-all duration-300 border-white/5 bg-white/5 text-white/40 hover:bg-white/10 hover:text-white">Crimson</button></div><div class="jsx-60e53460599086e3 space-y-6"><div class="space-y-3"><div class="flex items-center justify-between text-[9px] font-black uppercase tracking-[0.2em] text-white/40"><span>Persistence</span><span class="text-white font-mono">0.940</span></div><input type="range" min="0.8" max="0.99" step="0.001" class="h-[2px] w-full cursor-pointer appearance-none bg-white/10 accent-white" value="0.94"/></div><div class="space-y-3"><div class="flex items-center justify-between text-[9px] font-black uppercase tracking-[0.2em] text-white/40"><span>Drift</span><span class="text-white font-mono">-0.008</span></div><input type="range" min="-0.03" max="0.03" step="0.001" class="h-[2px] w-full cursor-pointer appearance-none bg-white/10 accent-white" value="-0.008"/></div><div class="space-y-3"><div class="flex items-center justify-between text-[9px] font-black uppercase tracking-[0.2em] text-white/40"><span>Luminance</span><span class="text-white font-mono">1.100</span></div><input type="range" min="0.5" max="2" step="0.1" class="h-[2px] w-full cursor-pointer appearance-none bg-white/10 accent-white" value="1.1"/></div></div></div></div></div></div><!--$--><!--/$--><script src="/_next/static/chunks/0ht900cau6_ur.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[39756,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"default\"]\n3:I[37457,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"default\"]\n4:I[47257,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"ClientPageRoot\"]\n5:I[31713,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\",\"/_next/static/chunks/0obd6q5_c4.8u.js\"],\"default\"]\n8:I[97367,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"OutletBoundary\"]\n9:\"$Sreact.suspense\"\nb:I[97367,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"ViewportBoundary\"]\nd:I[97367,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"MetadataBoundary\"]\nf:I[68027,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"default\",1]\n:HL[\"/_next/static/chunks/0no26hx37ejgo.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.0.q-h669a_dqa.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.16t1db8_9y2o~.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script><script>self.__next_f.push([1,"0:{\"P\":null,\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",16],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0no26hx37ejgo.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0dbhjjzl8qfwv.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable h-full antialiased\",\"suppressHydrationWarning\":true,\"children\":[\"$\",\"body\",null,{\"className\":\"min-h-full flex flex-col\",\"children\":[\"$\",\"$L2\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L3\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L4\",null,{\"Component\":\"$5\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@6\",\"$@7\"]}}],[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/0obd6q5_c4.8u.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@a\"}]}]]}],{},null,false,null]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lb\",null,{\"children\":\"$Lc\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Le\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$f\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0no26hx37ejgo.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":true,\"h\":null,\"s\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"frDyRoK_5mJLEhw1D_l8t\"}\n"])</script><script>self.__next_f.push([1,"6:{}\n7:\"$0:f:0:1:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script><script>self.__next_f.push([1,"c:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script><script>self.__next_f.push([1,"10:I[27201,[\"/_next/static/chunks/0dbhjjzl8qfwv.js\"],\"IconMark\"]\na:null\ne:[[\"$\",\"title\",\"0\",{\"children\":\"Motion Trace\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Turn your videos into memory. Generate elegant visual trails, soft echoes, and flowing afterimages that follow every frame giving your videos a cinematic depth that feels alive and intentional.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0x3dzn~oxb6tn.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L10\",\"3\",{}]]\n"])</script></body></html> |