Ranzhen AI Video Studio Home
A dark home page for an AI video and image platform: three-mode prompt composer, film-strip carousel, vertical showcase rail, auto-rotating capability visuals, agent chat demo, model marquee and a big closing headline.
Overview
A complete single-file page to start from. Structure, copy slots and responsive layout are all in place; copy the prompt to your model and it rewrites the copy, colors and images for your brand.
Where to use it
Home pages for AI image and video generation platforms: prompt composer, showcase and model introductions.
Install
With Builder, fetch the full page source with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt template ai-video-studio
mcp › Use 8pt MCP to call get_template("ai-video-studio")
Code
Single-file HTML + CSS, no build step.
<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="robots" content="noindex"><title>Ranzhen — AI video studio home page template</title>
<style>
:root{--bg:#000;--bg2:#070505;--pn:#0B0807;--ink:#fff;--mu:#A3A0A6;--fa:#6E6B72;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);--or:#FF5A1F;--or2:#FF8A3D;--or3:#C8360E;--gold:#FFB547;--ease:cubic-bezier(.16,1,.3,1);--disp:"Bebas Neue","Oswald",Impact,"Arial Narrow",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',Inter,system-ui,sans-serif;font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}p,h1,h2,h3,h4,ul{margin:0}ul{padding:0;list-style:none}img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--or);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 26px;border:0;border-radius:999px;font-size:16px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s,box-shadow .2s,color .2s}
.btn:active{transform:translateY(2px)}
.btn-o{background:var(--or);color:#fff;box-shadow:0 3px 0 var(--or3),0 10px 30px rgba(255,90,31,.25)}.btn-o:hover{background:#ff6a33}
…Subscribe to Builder to see the full source.See pricing