Kai Render — 3D & Motion Designer Portfolio

<canvas id="hxCanvas" class="hx-canvas"></canvas>
<nav class="hx-nav" data-rv>
  <a class="hx-brand" href="#top">◈ Kai Render</a>
  <div class="hx-links"><a href="#reel">Reel</a><a href="#work">Work</a><a href="#services">Services</a><a href="#clients">Clients</a><a href="#contact">Contact</a></div>
  <a class="hx-nav-cta" data-mag href="#contact">Hire me</a>
</nav>

<header id="top" class="hx-hero">
  <div class="hx-hero-inner">
    <span class="hx-status" data-rv><i></i> Booking projects · Q4 2026</span>
    <h1 data-rv>3D &amp; Motion<br>designer making<br><span>brands move.</span></h1>
    <p data-rv>I'm Kai — a 3D artist and motion designer crafting product films, title sequences and immersive web visuals for brands that want to be felt, not just seen.</p>
    <div class="hx-hero-btns" data-rv><a class="hx-btn hx-btn-fill" data-mag href="#reel">▶ Watch the reel</a><a class="hx-btn hx-btn-ghost" data-mag href="#work">See projects</a></div>
  </div>
  <div class="hx-hero-scroll" data-rv>scroll to explore</div>
</header>

<section id="reel" class="hx-sec">
  <div class="hx-head" data-rv><span class="hx-kick">// showreel 2026</span><h2>Motion in a minute</h2></div>
  <div class="hx-reel" data-rv data-mag>
    <div class="hx-reel-inner"><span class="hx-play">▶</span><span class="hx-reel-label">Play showreel · 1:24</span></div>
    <div class="hx-reel-meta"><span>4K · 60fps</span><span>Cinema 4D · Octane</span><span>After Effects</span></div>
  </div>
</section>

<section class="hx-stats" data-rv>
  <div class="hx-stat" data-count="180"><b>0</b><span>Projects rendered</span></div>
  <div class="hx-stat" data-count="60"><b>0</b><span>Happy brands</span></div>
  <div class="hx-stat" data-count="14"><b>0</b><span>Awards &amp; features</span></div>
  <div class="hx-stat" data-count="9"><b>0</b><span>Years animating</span></div>
</section>

<section id="work" class="hx-sec">
  <div class="hx-head" data-rv><span class="hx-kick">// featured work</span><h2>Selected projects</h2></div>
  <div class="hx-work">
    <a class="hx-card hx-card-lg" data-rv href="#" style="--g:linear-gradient(135deg,#7c3aed,#ec4899)"><div class="hx-card-body"><span class="hx-tag">Product film</span><h3>Aether — sneaker launch</h3><p>A 30-second hero film with fluid sims and procedural materials for a global sneaker drop.</p></div></a>
    <a class="hx-card" data-rv href="#" style="--g:linear-gradient(135deg,#06b6d4,#3b82f6)"><div class="hx-card-body"><span class="hx-tag">Title sequence</span><h3>Nebula — series titles</h3><p>Animated opening titles for a sci-fi streaming series.</p></div></a>
    <a class="hx-card" data-rv href="#" style="--g:linear-gradient(135deg,#f59e0b,#ef4444)"><div class="hx-card-body"><span class="hx-tag">Web 3D</span><h3>Orbit — interactive site</h3><p>Real-time WebGL product configurator for a hardware startup.</p></div></a>
    <a class="hx-card hx-card-lg" data-rv href="#" style="--g:linear-gradient(135deg,#10b981,#84cc16)"><div class="hx-card-body"><span class="hx-tag">Brand motion</span><h3>Lumen — identity in motion</h3><p>A full animated brand system: logo builds, transitions and a social toolkit for a fintech rebrand.</p></div></a>
  </div>
</section>

<section id="services" class="hx-sec hx-sec-alt">
  <div class="hx-head" data-rv><span class="hx-kick">// what I make</span><h2>Services</h2></div>
  <div class="hx-svc">
    <div class="hx-svc-item" data-rv><div class="hx-svc-ico">◇</div><h3>3D animation</h3><p>Product films, abstract loops and photoreal renders in Cinema 4D &amp; Octane.</p></div>
    <div class="hx-svc-item" data-rv><div class="hx-svc-ico">◈</div><h3>Motion graphics</h3><p>Explainers, title sequences and social content that move with intent.</p></div>
    <div class="hx-svc-item" data-rv><div class="hx-svc-ico">◆</div><h3>Web &amp; real-time 3D</h3><p>Interactive WebGL experiences and configurators built for the browser.</p></div>
    <div class="hx-svc-item" data-rv><div class="hx-svc-ico">▣</div><h3>Brand motion systems</h3><p>Animated identity kits that keep brands consistent in motion.</p></div>
  </div>
  <div class="hx-tools" data-rv><span>Cinema 4D</span><span>Octane</span><span>Houdini</span><span>After Effects</span><span>Blender</span><span>Three.js</span><span>Redshift</span><span>Premiere</span></div>
</section>

<section id="clients" class="hx-sec">
  <div class="hx-head" data-rv><span class="hx-kick">// trusted by</span><h2>Clients &amp; collaborators</h2></div>
  <div class="hx-clients" data-rv><span>◆ Aether</span><span>● Nebula</span><span>▲ Orbit</span><span>★ Lumen</span><span>✦ Norra</span><span>◇ Pulse</span></div>
  <div class="hx-tests">
    <figure class="hx-test" data-rv><blockquote>"Kai turned a flat product into something people couldn't stop watching. The launch film tripled our engagement."</blockquote><figcaption><span class="hx-av" style="background:#7c3aed">EL</span><div><b>Erik Lund</b><em>CMO, Aether</em></div></figcaption></figure>
    <figure class="hx-test" data-rv><blockquote>"Endlessly creative and rock-solid on deadlines. Our title sequence became the most-shared part of the show."</blockquote><figcaption><span class="hx-av" style="background:#06b6d4">SP</span><div><b>Sara Popa</b><em>Producer, Nebula</em></div></figcaption></figure>
    <figure class="hx-test" data-rv><blockquote>"The interactive site Kai built feels like the future. Conversions and time-on-page both jumped."</blockquote><figcaption><span class="hx-av" style="background:#f59e0b">DR</span><div><b>Daniel Roth</b><em>Founder, Orbit</em></div></figcaption></figure>
  </div>
</section>

<section id="contact" class="hx-contact" data-rv>
  <div class="hx-contact-inner">
    <h2>Let's make something move.</h2>
    <p>Got a launch, a film or a wild idea? Tell me about it — I reply within a day.</p>
    <form class="hx-form" onsubmit="return false">
      <div class="hx-row"><input type="text" placeholder="Your name"><input type="email" placeholder="Email"></div>
      <textarea rows="3" placeholder="Describe your project..."></textarea>
      <button class="hx-btn hx-btn-fill hx-btn-block" data-mag>Send brief →</button>
    </form>
    <p class="hx-contact-alt">Or email <a href="mailto:hello@kairender.studio">hello@kairender.studio</a></p>
  </div>
</section>

<footer class="hx-foot">
  <div class="hx-foot-inner"><a class="hx-brand" href="#top">◈ Kai Render</a><div class="hx-social"><a href="#">Behance</a><a href="#">Vimeo</a><a href="#">Instagram</a><a href="#">LinkedIn</a></div></div>
  <div class="hx-foot-bottom"><span>© 2026 Kai Render · 3D &amp; Motion Design</span><span>Made with <a href="https://convertatlas.org" target="_blank" rel="noopener">convertatlas.org</a></span></div>
</footer>

*{box-sizing:border-box}
body{margin:0;background:#06060c;color:#dfe2f0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;overflow-x:hidden;line-height:1.6}
a{text-decoration:none;color:inherit}
.hx-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.6}
.hx-nav,.hx-hero,section,footer{position:relative;z-index:1}
.hx-btn{display:inline-block;padding:13px 26px;border-radius:12px;font-weight:600;font-size:.93rem;cursor:pointer;border:0;transition:transform .15s ease,box-shadow .15s ease}
.hx-btn-fill{background:linear-gradient(120deg,#7c3aed,#ec4899);color:#fff}.hx-btn-fill:hover{box-shadow:0 14px 36px rgba(124,58,237,.45)}
.hx-btn-ghost{border:1px solid rgba(255,255,255,.2);color:#dfe2f0}.hx-btn-ghost:hover{border-color:#ec4899;color:#ec4899}
.hx-btn-block{width:100%}
.hx-kick{font-family:ui-monospace,monospace;color:#a855f7;font-size:.82rem;letter-spacing:.04em}
.hx-brand{font-weight:800;font-size:1.08rem}
.hx-nav{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;position:fixed;top:0;left:0;right:0;z-index:60;background:rgba(6,6,12,.6);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}
.hx-links{display:flex;gap:26px}.hx-links a{color:#9aa0bf;font-size:.9rem}.hx-links a:hover{color:#fff}
.hx-nav-cta{background:rgba(168,85,247,.16);border:1px solid rgba(168,85,247,.4);color:#d8b4fe;padding:8px 18px;border-radius:10px;font-size:.86rem;font-weight:600}
.hx-hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 24px 70px}
.hx-hero-inner{max-width:780px}
.hx-status{display:inline-flex;align-items:center;gap:8px;background:rgba(124,58,237,.12);border:1px solid rgba(124,58,237,.35);color:#d8b4fe;border-radius:999px;padding:6px 16px;font-size:.82rem;margin-bottom:24px}
.hx-status i{width:8px;height:8px;border-radius:50%;background:#a855f7;animation:hxP 2s infinite}
@keyframes hxP{0%{box-shadow:0 0 0 0 rgba(168,85,247,.5)}70%{box-shadow:0 0 0 9px rgba(168,85,247,0)}}
.hx-hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:800;letter-spacing:-.035em;line-height:1.02;margin:0 0 18px}
.hx-hero h1 span{background:linear-gradient(120deg,#a855f7,#ec4899,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-hero p{color:#9aa0bf;font-size:1.1rem;max-width:560px;margin:0 auto 30px}
.hx-hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hx-hero-scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:ui-monospace,monospace;font-size:.76rem;color:#6b7196;letter-spacing:.1em;animation:hxFloat 2s infinite}
@keyframes hxFloat{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}
.hx-sec{max-width:1120px;margin:0 auto;padding:80px 32px}
.hx-sec-alt{background:linear-gradient(180deg,transparent,rgba(124,58,237,.05),transparent)}
.hx-head{text-align:center;margin-bottom:42px}
.hx-head h2{font-size:clamp(1.9rem,4vw,2.8rem);font-weight:800;letter-spacing:-.03em;margin:8px 0 0;color:#fff}
.hx-reel{max-width:880px;margin:0 auto;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(135deg,rgba(124,58,237,.14),rgba(236,72,153,.1));overflow:hidden;cursor:pointer;transition:transform .2s}
.hx-reel-inner{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.hx-play{width:78px;height:78px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;font-size:1.6rem;color:#fff;transition:.2s}
.hx-reel:hover .hx-play{background:linear-gradient(120deg,#7c3aed,#ec4899);transform:scale(1.08)}
.hx-reel-label{font-family:ui-monospace,monospace;color:#c9cce6;font-size:.9rem}
.hx-reel-meta{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:16px;border-top:1px solid rgba(255,255,255,.08);font-family:ui-monospace,monospace;font-size:.78rem;color:#8088ac}
.hx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;max-width:920px;margin:0 auto;padding:30px 32px 50px}
.hx-stat{text-align:center;border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:24px;background:rgba(255,255,255,.02)}
.hx-stat b{display:block;font-size:2.2rem;font-weight:800;background:linear-gradient(120deg,#a855f7,#06b6d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.hx-stat span{color:#8088ac;font-size:.82rem}
.hx-work{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.hx-card{border-radius:20px;overflow:hidden;position:relative;min-height:230px;display:flex;align-items:flex-end;transition:transform .25s ease}
.hx-card::before{content:"";position:absolute;inset:0;background:var(--g)}
.hx-card::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.6));mix-blend-mode:multiply}
.hx-card:hover{transform:translateY(-6px)}
.hx-card-lg{min-height:300px}
.hx-card-body{position:relative;z-index:1;padding:26px;color:#fff}
.hx-tag{font-family:ui-monospace,monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;opacity:.95}
.hx-card-body h3{font-size:1.4rem;font-weight:800;margin:6px 0 6px}
.hx-card-body p{font-size:.92rem;margin:0;opacity:.92;max-width:420px}
.hx-svc{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:26px}
.hx-svc-item{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;transition:.22s}
.hx-svc-item:hover{transform:translateY(-5px);border-color:rgba(168,85,247,.5);background:rgba(124,58,237,.06)}
.hx-svc-ico{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#7c3aed,#ec4899);display:grid;place-items:center;font-size:1.3rem;color:#fff;margin-bottom:14px}
.hx-svc-item h3{margin:0 0 8px;font-size:1.1rem;color:#fff}
.hx-svc-item p{color:#9aa0bf;font-size:.88rem;margin:0}
.hx-tools{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.hx-tools span{font-family:ui-monospace,monospace;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:7px 14px;font-size:.84rem;color:#c9cce6;transition:.18s}
.hx-tools span:hover{border-color:#a855f7;color:#d8b4fe;transform:translateY(-2px)}
.hx-clients{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;margin-bottom:40px}
.hx-clients span{font-size:1.2rem;font-weight:800;color:#535a7e;transition:.2s}
.hx-clients span:hover{color:#a855f7}
.hx-tests{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hx-test{margin:0;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:26px;transition:.22s}
.hx-test:hover{transform:translateY(-4px);border-color:rgba(168,85,247,.3)}
.hx-test blockquote{margin:0 0 18px;font-size:.96rem;line-height:1.7;color:#cdd1e8}
.hx-test figcaption{display:flex;align-items:center;gap:12px}
.hx-av{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.84rem}
.hx-test figcaption b{display:block;font-size:.92rem;color:#fff}.hx-test figcaption em{font-style:normal;color:#8088ac;font-size:.82rem}
.hx-contact{max-width:720px;margin:50px auto;padding:0 32px}
.hx-contact-inner{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);border-radius:26px;padding:50px 40px;text-align:center}
.hx-contact-inner h2{font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-.03em;margin:0 0 10px;color:#fff}
.hx-contact-inner>p{color:#9aa0bf;margin:0 0 26px}
.hx-form{max-width:480px;margin:0 auto}
.hx-row{display:flex;gap:12px}
.hx-form input,.hx-form textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 15px;color:#fff;font-family:inherit;font-size:.92rem;outline:none;margin-bottom:12px}
.hx-form input::placeholder,.hx-form textarea::placeholder{color:#6b7196}
.hx-form input:focus,.hx-form textarea:focus{border-color:#a855f7}
.hx-contact-alt{font-size:.9rem;color:#8088ac;margin-top:16px}.hx-contact-alt a{color:#d8b4fe;font-weight:600}
.hx-foot{max-width:1120px;margin:0 auto;padding:40px 32px}
.hx-foot-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.08)}
.hx-social{display:flex;gap:20px}.hx-social a{color:#9aa0bf;font-size:.9rem}.hx-social a:hover{color:#a855f7}
.hx-foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;color:#6b7196;font-size:.85rem}
.hx-foot-bottom a{color:#a855f7;font-weight:600}
@media(max-width:860px){.hx-work,.hx-svc{grid-template-columns:1fr 1fr}.hx-stats{grid-template-columns:1fr 1fr}.hx-tests{grid-template-columns:1fr}.hx-card-lg{min-height:230px}}
@media(max-width:600px){.hx-links{display:none}.hx-work,.hx-svc{grid-template-columns:1fr}.hx-row{flex-direction:column}}
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}[data-rv].in{opacity:1;transform:none}

(function(){var c=document.getElementById('hxCanvas');if(!c)return;var x=c.getContext('2d'),w,h,pts,mx=-999,my=-999;
function size(){w=c.width=innerWidth;h=c.height=innerHeight;var n=Math.min(90,Math.floor(w*h/16000));pts=[];for(var i=0;i<n;i++)pts.push({x:Math.random()*w,y:Math.random()*h,vx:(Math.random()-.5)*.4,vy:(Math.random()-.5)*.4})}
size();addEventListener('resize',size);
addEventListener('mousemove',function(e){mx=e.clientX;my=e.clientY});
addEventListener('mouseout',function(){mx=-999;my=-999});
function loop(){x.clearRect(0,0,w,h);for(var i=0;i<pts.length;i++){var p=pts[i];p.x+=p.vx;p.y+=p.vy;if(p.x<0||p.x>w)p.vx*=-1;if(p.y<0||p.y>h)p.vy*=-1;
var dm=Math.hypot(p.x-mx,p.y-my);if(dm<140){var a=Math.atan2(p.y-my,p.x-mx);p.x+=Math.cos(a)*1.4;p.y+=Math.sin(a)*1.4}
x.beginPath();x.arc(p.x,p.y,1.8,0,6.28);x.fillStyle='rgba(168,85,247,.8)';x.fill();
for(var j=i+1;j<pts.length;j++){var q=pts[j],d=Math.hypot(p.x-q.x,p.y-q.y);if(d<120){x.beginPath();x.moveTo(p.x,p.y);x.lineTo(q.x,q.y);x.strokeStyle='rgba(124,58,237,'+(.18*(1-d/120))+')';x.lineWidth=1;x.stroke()}}}
requestAnimationFrame(loop)}loop();
})();
document.querySelectorAll('[data-mag]').forEach(function(b){b.addEventListener('mousemove',function(e){var r=b.getBoundingClientRect();b.style.transform='translate('+((e.clientX-r.left-r.width/2)*.25)+'px,'+((e.clientY-r.top-r.height/2)*.4)+'px)'});b.addEventListener('mouseleave',function(){b.style.transform='translate(0,0)'})});
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting){e.target.classList.add('in');if(e.target.hasAttribute('data-bar')){e.target.querySelectorAll('[data-w]').forEach(function(b){b.style.width=b.getAttribute('data-w')})}if(e.target.hasAttribute('data-count')){var t=+e.target.getAttribute('data-count'),el=e.target,s=null;requestAnimationFrame(function st(ts){if(!s)s=ts;var p=Math.min((ts-s)/1500,1);el.firstChild.textContent=Math.floor((1-Math.pow(1-p,3))*t).toLocaleString();if(p<1)requestAnimationFrame(st)})}io.unobserve(e.target)}})},{threshold:.18});
document.querySelectorAll('[data-rv],[data-bar],[data-count]').forEach(function(el){io.observe(el)});