Skip to content

Instantly share code, notes, and snippets.

@walmik

walmik/gist:de36210c5de4706a07330fe7a14377ac

Created February 25, 2026 23:47
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save walmik/de36210c5de4706a07330fe7a14377ac to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save walmik/de36210c5de4706a07330fe7a14377ac to your computer and use it in GitHub Desktop.
Download ZIP
gatt
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GATT — A 3D Animated Science Fiction Series</title>
<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=Bebas+Neue&family=Rajdhani:wght@300;400;500;600;700&family=Crimson+Pro:ital,wght@0,300;0,400;1,300;1,400&display=swap" rel="stylesheet">
<style>
:root {
--void: #04040a;
--deep: #080810;
--surface: #0d0d1a;
--card: #10101e;
--border: rgba(80, 110, 170, 0.15);
--glow: #4a7fc1;
--accent: #6fb3d3;
--accent-warm: #c4895a;
--text-primary: #d8d8ee;
--text-secondary: #7a7a9a;
--text-dim: #3a3a58;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background-color: var(--void);
color: var(--text-primary);
font-family: 'Rajdhani', sans-serif;
line-height: 1.7;
overflow-x: hidden;
}
/* ─── HERO ─────────────────────────────────────── */
.hero {
position: relative;
width: 100%;
height: 100vh;
min-height: 600px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
overflow: hidden;
}
.hero-bg {
position: absolute;
inset: 0;
background-image: url('assets/gatt_banner.png');
background-size: cover;
background-position: center 30%;
transform: scale(1.04);
animation: heroFadeIn 2s ease forwards;
}
@keyframes heroFadeIn {
from { opacity: 0; transform: scale(1.08); }
to { opacity: 1; transform: scale(1.04); }
}
/* Cinematic letterbox + gradient vignette */
.hero-bg::before {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(to bottom,
rgba(4,4,10,0.55) 0%,
transparent 25%,
transparent 55%,
rgba(4,4,10,0.7) 75%,
rgba(4,4,10,0.97) 100%
),
linear-gradient(to right,
rgba(4,4,10,0.4) 0%,
transparent 30%,
transparent 70%,
rgba(4,4,10,0.4) 100%
);
}
/* Grain overlay */
.hero-bg::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
opacity: 0.5;
pointer-events: none;
}
.hero-content {
position: relative;
z-index: 2;
text-align: center;
padding: 0 24px 72px;
animation: heroContentUp 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}
@keyframes heroContentUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-logo {
height: 90px;
margin-bottom: 24px;
filter: drop-shadow(0 0 24px rgba(74,127,193,0.5));
}
.hero-tagline {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2.4rem, 5vw, 4.5rem);
letter-spacing: 0.12em;
line-height: 1;
color: #fff;
text-shadow: 0 0 60px rgba(74,127,193,0.4), 0 2px 20px rgba(0,0,0,0.8);
margin-bottom: 16px;
}
.hero-tagline span {
color: var(--accent);
}
.hero-sub {
font-family: 'Crimson Pro', serif;
font-size: clamp(1rem, 1.8vw, 1.3rem);
font-style: italic;
color: rgba(200,200,220,0.7);
letter-spacing: 0.03em;
max-width: 540px;
margin: 0 auto 32px;
}
.hero-scroll {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.72rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--text-secondary);
text-decoration: none;
border: 1px solid var(--border);
padding: 12px 28px;
border-radius: 2px;
transition: all 0.3s ease;
background: rgba(13,13,26,0.5);
backdrop-filter: blur(8px);
}
.hero-scroll:hover {
color: var(--accent);
border-color: rgba(111,179,211,0.4);
background: rgba(74,127,193,0.1);
}
.hero-scroll svg {
animation: scrollBounce 1.8s ease-in-out infinite;
}
@keyframes scrollBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}
/* ─── SYNOPSIS ─────────────────────────────────── */
.synopsis {
background: var(--void);
padding: 96px 24px;
text-align: center;
}
.synopsis-inner {
max-width: 700px;
margin: 0 auto;
}
.eyebrow {
font-family: 'Rajdhani', sans-serif;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.eyebrow::before, .eyebrow::after {
content: '';
display: block;
width: 40px;
height: 1px;
background: var(--accent);
opacity: 0.4;
}
.synopsis-text {
font-family: 'Crimson Pro', serif;
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-weight: 300;
line-height: 1.85;
color: rgba(216,216,238,0.85);
}
.synopsis-text em {
color: var(--accent);
font-style: italic;
font-weight: 400;
}
/* Bible toggle */
.bible-toggle {
margin-top: 48px;
text-align: left;
border: 1px solid var(--border);
border-radius: 4px;
overflow: hidden;
background: var(--card);
}
.bible-toggle summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 18px 24px;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
user-select: none;
transition: background 0.2s;
}
.bible-toggle summary:hover {
background: rgba(74,127,193,0.06);
}
.bible-toggle summary::-webkit-details-marker { display: none; }
.bible-arrow {
transition: transform 0.3s ease;
opacity: 0.6;
}
.bible-toggle[open] .bible-arrow {
transform: rotate(180deg);
}
.bible-content {
padding: 0 24px 24px;
border-top: 1px solid var(--border);
font-family: 'Crimson Pro', serif;
font-size: 1.1rem;
color: #9090b0;
line-height: 1.9;
}
.bible-content p { margin-top: 18px; }
.bible-content p:first-child em {
display: block;
font-size: 1.2rem;
color: rgba(200,200,220,0.7);
margin-top: 18px;
}
/* ─── CONTAINER ────────────────────────────────── */
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 32px;
}
/* ─── SECTIONS ─────────────────────────────────── */
.section {
padding: 80px 0;
border-top: 1px solid var(--border);
}
.section-header {
margin-bottom: 36px;
}
.section-title {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(2rem, 3.5vw, 2.8rem);
letter-spacing: 0.1em;
color: #fff;
line-height: 1;
margin-top: 10px;
}
.section-desc {
margin-top: 12px;
font-size: 1.05rem;
color: var(--text-secondary);
max-width: 600px;
}
/* ─── VIDEO ────────────────────────────────────── */
.video-wrapper {
position: relative;
width: 100%;
padding-top: 56.25%;
border-radius: 3px;
overflow: hidden;
background: var(--deep);
border: 1px solid var(--border);
box-shadow: 0 24px 80px rgba(0,0,0,0.7), 0 0 0 1px rgba(74,127,193,0.06);
}
.video-wrapper iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: none;
}
/* ─── SHORTS GRID ──────────────────────────────── */
.shorts-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
.short-item {
border-radius: 3px;
overflow: hidden;
background: var(--deep);
aspect-ratio: 9 / 16;
border: 1px solid var(--border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.short-item:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(74,127,193,0.2);
}
.short-item iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* ─── TEAM ─────────────────────────────────────── */
.team-text {
font-family: 'Crimson Pro', serif;
font-size: 1.2rem;
line-height: 1.9;
color: #9090b0;
max-width: 720px;
}
.team-text p { margin-bottom: 1.2em; }
.team-text p:last-child { margin-bottom: 0; }
.team-text a {
color: var(--accent);
text-decoration: none;
border-bottom: 1px solid rgba(111,179,211,0.3);
transition: border-color 0.2s, color 0.2s;
}
.team-text a:hover {
color: #fff;
border-color: var(--accent);
}
/* ─── PROCESS ──────────────────────────────────── */
.process-rows {
display: flex;
flex-direction: column;
gap: 0;
}
.process-row {
display: grid;
grid-template-columns: 200px 1fr;
gap: 48px;
align-items: center;
padding: 48px 0;
border-bottom: 1px solid var(--border);
}
.process-row:first-child { padding-top: 0; }
.process-row:last-child { border-bottom: none; padding-bottom: 0; }
.process-media {
border-radius: 3px;
overflow: hidden;
background: var(--deep);
aspect-ratio: 9 / 16;
border: 1px solid var(--border);
}
.process-media.landscape {
aspect-ratio: 16 / 10;
}
.process-media iframe,
.process-media img {
width: 100%;
height: 100%;
border: none;
display: block;
object-fit: cover;
}
.process-label {
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 0.25em;
text-transform: uppercase;
color: var(--accent-warm);
margin-bottom: 12px;
}
.process-title {
font-family: 'Bebas Neue', sans-serif;
font-size: 2rem;
letter-spacing: 0.08em;
color: #fff;
margin-bottom: 14px;
line-height: 1;
}
.process-body {
font-family: 'Crimson Pro', serif;
font-size: 1.1rem;
line-height: 1.85;
color: #7070a0;
}
/* ─── DIVIDER ───────────────────────────────────── */
.divider {
width: 100%;
height: 1px;
background: linear-gradient(to right, transparent, var(--border), transparent);
margin: 0;
}
/* ─── FOOTER ────────────────────────────────────── */
footer {
border-top: 1px solid var(--border);
padding: 48px 32px;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
}
.footer-logo {
height: 36px;
opacity: 0.5;
filter: grayscale(1);
}
.footer-copy {
font-size: 0.78rem;
letter-spacing: 0.1em;
color: var(--text-dim);
}
/* ─── FADE-IN ON SCROLL ──────────────────────────── */
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible {
opacity: 1;
transform: none;
}
/* ─── RESPONSIVE ────────────────────────────────── */
@media (max-width: 700px) {
.shorts-grid {
grid-template-columns: repeat(2, 1fr);
}
.process-row {
grid-template-columns: 1fr;
gap: 24px;
}
.process-media {
aspect-ratio: 16 / 9;
width: 100%;
}
.process-media.landscape {
aspect-ratio: 16 / 9;
}
footer {
flex-direction: column;
text-align: center;
}
}
</style>
</head>
<body>
<!-- ─── HERO ─────────────────────────────────────── -->
<section class="hero">
<div class="hero-bg"></div>
<div class="hero-content">
<img class="hero-logo" src="assets/logo.png" alt="GATT">
<div class="hero-tagline">A 3D Animated<br><span>Space Western</span></div>
<p class="hero-sub">Superhuman bounty hunters. Fugitives under the law. Liberating those they encounter from the clutches of oppression — in whatever form it manifests.</p>
<a href="#synopsis" class="hero-scroll">
Discover the Series
<svg width="12" height="14" viewBox="0 0 12 14" fill="none">
<path d="M6 1v10M1 8l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>
</div>
</section>
<!-- ─── SYNOPSIS ─────────────────────────────────── -->
<section class="synopsis" id="synopsis">
<div class="synopsis-inner reveal">
<div class="eyebrow">The Series</div>
<p class="synopsis-text">
GATT takes the tone and atmosphere of Marvel's <em>Guardians of the Galaxy</em> and combines it
with the structure and themes of Shonen Jump's <em>One Piece</em>. A crew of superhuman bounty
hunters hop from planet to planet — fugitives under the law, liberating those they encounter
from the clutches of oppression in whatever form it manifests.
</p>
<details class="bible-toggle">
<summary>
About the Series
<svg class="bible-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
<path d="M2 5l5 5 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</summary>
<div class="bible-content">
<p><em>A social media app threatens to launch a civil war when it's discovered that criminals use it to siphon funds from the government…</em></p>
<p>As an entry in the space western genre, GATT blends the chaotic lawlessness of an economy steeped in the bounty system with the sense of discovery granted by the final frontier of space, set amidst the backdrop of escalating civil war tensions.</p>
<p>This burgeoning powder keg, spurred on by organized space pirates and groups of marginalized citizens grappling with an authoritarian technocracy, becomes the perfect catalyst for human drama — exploring generational trauma, individualism in the face of suppression, and the idea that people need one another, even in an environment that rewards looking over your shoulder.</p>
<p>The potential for this narrative to inspire real-world change is the overall purpose of this project.</p>
</div>
</details>
</div>
</section>
<div class="container">
<!-- ─── PILOT EPISODE ───────────────────────────── -->
<section class="section reveal">
<div class="section-header">
<div class="eyebrow" style="justify-content: flex-start;">Pilot Episode</div>
<h2 class="section-title">Episode One — Star</h2>
<p class="section-desc">In 2022 we released a 36-minute pilot episode created in Unity Engine.</p>
</div>
<div class="video-wrapper">
<iframe
src="https://www.youtube.com/embed/psK-yVmJQms"
title="GATT — Pilot Episode"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</section>
<!-- ─── SWITCH TO UNREAL ────────────────────────── -->
<section class="section reveal">
<div class="section-header">
<div class="eyebrow" style="justify-content: flex-start;">Unreal Engine 5</div>
<h2 class="section-title">Remastered &amp; Rebuilt</h2>
<p class="section-desc">We are remastering the pilot and laying the groundwork for future episodes in Unreal Engine 5 — a more robust toolset for real-time filmmakers.</p>
</div>
<div class="shorts-grid">
<div class="short-item">
<iframe src="https://www.youtube.com/embed/40pv5ePOfxM"
title="GATT — Short 1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/4XCBkHysTIA"
title="GATT — Short 2"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/iO6_-A9ppt8"
title="GATT — Short 3"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="short-item">
<iframe src="https://www.youtube.com/embed/u6m8kUqwQ5o"
title="GATT — Short 4"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
</section>
<!-- ─── TEAM ────────────────────────────────────── -->
<section class="section reveal">
<div class="section-header">
<div class="eyebrow" style="justify-content: flex-start;">The Creators</div>
<h2 class="section-title">About the Team</h2>
</div>
<div class="team-text">
<p>The team is led by <a href="https://rigved.info">Rigved Deshpande</a>, a former Blizzard technical artist with experience shipping AAA titles. Creative partner Alfonso brings nearly a decade of professional screenwriting experience, enabling seamless coordination across a team of 10+ voice actors and musicians — all working remotely.</p>
<p>We premiered Episode 1 with a live viewing in virtual reality on the <a href="https://www.spatial.io/s/R1G-Studios-HQ-631e09e1af75330001796352?share=4751098232479200507">Spatial</a> platform. Over the course of the evening 60+ people tuned in on phones, PCs, and VR headsets — making ours the most popular space that night.</p>
<p>We believe in giving back: all 3D assets created during production will be released free on <a href="https://sketchfab.com/R1GStudios">SketchFab</a>, and all pipeline tools built with the Blender and Unreal Python APIs will be open-sourced on <a href="https://github.com/R1G/GATT">GitHub</a>.</p>
</div>
</section>
<!-- ─── PROCESS ─────────────────────────────────── -->
<section class="section reveal">
<div class="section-header">
<div class="eyebrow" style="justify-content: flex-start;">Behind the Scenes</div>
<h2 class="section-title">Our Process</h2>
</div>
<div class="process-rows">
<div class="process-row">
<div class="process-media">
<iframe src="https://www.youtube.com/embed/0_Bpl4w--eM"
title="Motion Capture"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="process-text">
<div class="process-label">01 — Capture</div>
<div class="process-title">Motion Capture</div>
<p class="process-body">We use Sony's Mocopi Sensor Kit to record motion capture performances streamed directly to our Unreal Metahumans using the Live Link plugin and Take Recorder.</p>
</div>
</div>
<div class="process-row">
<div class="process-media landscape">
<img src="assets/gatt-face-capture.gif" alt="Face Capture">
</div>
<div class="process-text">
<div class="process-label">02 — Facial</div>
<div class="process-title">Face Capture</div>
<p class="process-body">We use a variety of computer-vision techniques to capture authentic facial performances for our characters within Blender and Unreal.</p>
</div>
</div>
<div class="process-row">
<div class="process-media">
<iframe src="https://www.youtube.com/embed/nHjrHfvv7rk"
title="Blender Content Authoring"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
<div class="process-text">
<div class="process-label">03 — Authoring</div>
<div class="process-title">Blender Content</div>
<p class="process-body">We author most of our 3D content in Blender — free and open-source, encouraging seamless collaboration with the artists we work with around the world.</p>
</div>
</div>
</div>
</section>
</div>
<!-- ─── FOOTER ───────────────────────────────────── -->
<footer>
<img class="footer-logo" src="assets/logo.png" alt="R1G Studios">
<span class="footer-copy">&copy; 2025 GATT &nbsp;·&nbsp; R1G Studios &nbsp;·&nbsp; All Rights Reserved</span>
</footer>
<script>
// Scroll reveal
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => {
if (e.isIntersecting) {
e.target.classList.add('visible');
observer.unobserve(e.target);
}
});
}, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });
reveals.forEach(el => observer.observe(el));
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment