chore: organize site files

This commit is contained in:
syntaxbullet
2026-06-12 18:01:30 +02:00
parent e48582fa2b
commit bf3a434342
18 changed files with 31 additions and 31 deletions

23
pages/contact.html Normal file
View File

@@ -0,0 +1,23 @@
<!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="Collaborate with Teppelin Labs on research, events, digital products, and experimental technology."><title>Collaborate - Teppelin Labs</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="../styles.css">
</head>
<body data-page="contact">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="../index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="../index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero section-dark grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Visitor path / Collaborate</p><p class="page-hero-copy">For organizations, researchers, communities, and builders who want to explore a technology problem with the collective.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">04</b>Bring</span><span>the right</span><span class="text-orange">question.</span></h1></section>
<section class="section grid-surface"><div class="contact-grid"><div class="contact-intro reveal"><p class="eyebrow">Collaboration brief</p><h2 class="section-title">Tell us what could exist.</h2><p class="body-copy" style="margin-top:32px;">We are open to experimental product work, technical research, community partnerships, workshops, events, and ideas that benefit from a multidisciplinary group of builders.</p></div><form class="contact-form reveal reveal-delay" data-contact-form><div class="field-grid">
<div class="field"><label for="name">Your name</label><input id="name" name="name" type="text" autocomplete="name" placeholder="Name" required></div><div class="field"><label for="email">Email</label><input id="email" name="email" type="email" autocomplete="email" placeholder="name@organization.com" required></div><div class="field"><label for="company">Organization</label><input id="company" name="company" type="text" autocomplete="organization" placeholder="Optional"></div><div class="field"><label for="type">Collaboration type</label><select id="type" name="type" required><option value="">Select one</option><option>Experimental product</option><option>Research</option><option>Event or workshop</option><option>Community partnership</option><option>Other</option></select></div><div class="field field-wide"><label for="project">What should we explore?</label><textarea id="project" name="project" placeholder="Share the question, context, timing, and what a useful outcome might look like." required></textarea></div>
</div><button class="btn" type="submit">Send collaboration brief</button><p class="form-status" aria-live="polite"></p></form></div>
<div class="contact-details reveal"><article class="contact-detail"><span class="meta">Email</span><a href="mailto:hello@teppelinlabs.com">hello@teppelinlabs.com</a></article><article class="contact-detail"><span class="meta">Community</span><p>Discord / Global / Online</p></article><article class="contact-detail"><span class="meta">Membership</span><a href="join.html">Apply separately here</a></article></div>
</section>
</main>
<footer class="site-footer"><div class="footer-bottom"><a class="footer-brand" href="../index.html"><img class="footer-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="../script.js"></script>
</body>
</html>

53
pages/join.html Normal file
View File

@@ -0,0 +1,53 @@
<!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="Apply to join Teppelin Labs, a selective online Discord collective for digital builders."><title>Apply for Membership - Teppelin Labs</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="../styles.css">
</head>
<body data-page="join">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="../index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="../index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero section-orange grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Member acquisition / Application</p><p class="page-hero-copy">Membership is for active digital builders who want to contribute to a focused peer community, not simply observe one.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">05</b>Apply</span><span>to build</span><span class="text-white">together.</span></h1></section>
<section class="section grid-surface"><div class="application-layout">
<aside class="application-aside reveal"><p class="eyebrow">Before you apply</p><h2 class="section-title">Signal over scale.</h2><p class="body-copy" style="margin-top:30px;">Applications help us understand your craft, current momentum, and how you might strengthen the room. We care more about evidence of curiosity and follow-through than titles or follower counts.</p><ul class="application-points"><li>Applications are reviewed by humans</li><li>Membership is currently application-based</li><li>Accepted members receive the Discord invite</li><li>Thoughtful answers matter more than long answers</li></ul></aside>
<form class="application-form reveal reveal-delay" data-application-form>
<div class="field-grid">
<div class="field"><label for="app-name">Full name</label><input id="app-name" name="name" type="text" autocomplete="name" placeholder="Your name" required></div>
<div class="field"><label for="app-email">Email</label><input id="app-email" name="email" type="email" autocomplete="email" placeholder="you@example.com" required></div>
<div class="field"><label for="app-discord">Discord username</label><input id="app-discord" name="discord" type="text" placeholder="username" required></div>
<div class="field"><label for="app-location">Location / timezone</label><input id="app-location" name="location" type="text" placeholder="City or UTC offset" required></div>
<div class="field field-wide"><label for="app-portfolio">Work, GitHub, or portfolio link</label><input id="app-portfolio" name="portfolio" type="url" placeholder="https://" required></div>
</div>
<span class="meta">Primary craft</span>
<div class="choice-grid">
<div class="choice"><input id="craft-engineering" type="radio" name="craft" value="Engineering" required><label for="craft-engineering">Software engineering</label></div>
<div class="choice"><input id="craft-design" type="radio" name="craft" value="Design"><label for="craft-design">Product / visual design</label></div>
<div class="choice"><input id="craft-ai" type="radio" name="craft" value="AI"><label for="craft-ai">AI / applied research</label></div>
<div class="choice"><input id="craft-creative" type="radio" name="craft" value="Creative technology"><label for="craft-creative">Creative technology</label></div>
</div>
<div class="field-grid">
<div class="field field-wide"><label for="app-work">What are you building or learning right now?</label><textarea id="app-work" name="current_work" placeholder="Tell us about the problem, project, or technical territory holding your attention." required></textarea></div>
<div class="field field-wide"><label for="app-proof">What is one thing you have made that best represents how you think?</label><textarea id="app-proof" name="proof" placeholder="Link it if possible and explain the choices or learning behind it." required></textarea></div>
<div class="field field-wide"><label for="app-contribution">How would you contribute to the collective?</label><textarea id="app-contribution" name="contribution" placeholder="Knowledge, critique, project leadership, introductions, sessions, collaboration, or something else." required></textarea></div>
<div class="field"><label for="app-time">Weekly availability</label><select id="app-time" name="availability" required><option value="">Select one</option><option>1-2 hours</option><option>3-5 hours</option><option>6-10 hours</option><option>10+ hours</option></select></div>
<div class="field"><label for="app-source">How did you find Teppelin?</label><input id="app-source" name="source" type="text" placeholder="Person, post, event, search..."></div>
</div>
<button class="btn" type="submit">Submit membership application</button>
<p class="form-note">Submitting this prototype stores nothing yet. Connect the form to Formspree, Tally, Airtable, or your own endpoint before publishing publicly.</p>
<p class="form-status" aria-live="polite"></p>
</form>
</div></section>
<section class="section section-dark"><div class="intro-grid"><h2 class="section-title reveal">What happens<br><span class="text-orange">next.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">A simple human review, followed by an invitation when the fit is clear.</p><p class="body-copy">We review the work and answers, look for evidence of active craft and collaborative intent, and may ask one short follow-up. Accepted applicants receive onboarding details and a private Discord invite.</p></div></div></section>
</main>
<footer class="site-footer"><div class="footer-bottom"><a class="footer-brand" href="../index.html"><img class="footer-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="../script.js"></script>
</body>
</html>

34
pages/methodology.html Normal file
View File

@@ -0,0 +1,34 @@
<!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="Inside Teppelin Labs: a structured online Discord collective for serious digital builders."><title>The Collective - Teppelin Labs</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="../styles.css">
</head>
<body data-page="methodology">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="../index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="../index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero section-orange grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Member path / The collective</p><p class="page-hero-copy">Teppelin is not a content feed or a giant open server. It is a deliberately organized network for capable builders who want real peers, active projects, and higher-signal conversation.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">02</b>Online</span><span>does not mean</span><span class="text-white">alone.</span></h1></section>
<section class="discord-panel"><div class="discord-copy reveal"><div><p class="eyebrow">Our shared workspace</p><h2 class="section-title">Organized<br>on Discord.</h2><p>The server is structured around craft, active labs, and useful exchange. Members can move from a quick question to a focused project room without losing the human context that makes collaboration work.</p></div><div class="button-row"><a class="btn btn-light" href="join.html">Apply for membership</a></div></div><div class="discord-visual reveal reveal-delay"><ul class="discord-channels"><li>member-lobby</li><li>what-are-you-building</li><li>engineering</li><li>design-and-motion</li><li>ai-and-agents</li><li>project-rooms</li><li>calls-and-sessions</li></ul></div></section>
<section class="section section-dark"><div class="intro-grid"><h2 class="section-title reveal">Structure makes<br>community <span class="text-orange">useful.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">The point is not constant activity. It is having the right people and spaces available when momentum appears.</p><p class="body-copy">Members are expected to be generous with context, serious about craft, respectful of others' time, and willing to contribute before asking for attention.</p></div></div><div class="process reveal">
<article class="process-step"><h3>Enter</h3><p>New members introduce their work, interests, and current questions so the community can connect them with relevant people and channels.</p></article>
<article class="process-step"><h3>Participate</h3><p>Share progress, join critique, contribute expertise, attend calls, and build a reputation through consistent useful participation.</p></article>
<article class="process-step"><h3>Collaborate</h3><p>Form small project groups around experiments, products, open-source work, research, or creative technology.</p></article>
<article class="process-step"><h3>Compound</h3><p>Document what worked, teach what you learned, and create more surface area for the next member or project to succeed.</p></article>
</div></section>
<section class="section grid-surface"><div class="principles-grid"><div class="principles-lead reveal"><p class="eyebrow">Community standards</p><h2 class="section-title">What keeps<br>the signal high.</h2></div><p class="principles-aside lede reveal reveal-delay">Skill matters. So do curiosity, generosity, follow-through, and the ability to work well with people unlike you.</p><div class="principle-list reveal">
<article class="principle"><span class="meta">01 / Make</span><h3>Show the work</h3><p>Ideas become more useful when they are visible. Share prototypes, notes, failures, decisions, and what you are learning.</p></article>
<article class="principle"><span class="meta">02 / Give</span><h3>Contribute context</h3><p>Strong communities are built by members who answer thoughtfully, make introductions, and help others move.</p></article>
<article class="principle"><span class="meta">03 / Respect</span><h3>Protect the room</h3><p>No spam, posturing, extraction, or performative noise. Be direct, kind, and conscious of other people's attention.</p></article>
<article class="principle"><span class="meta">04 / Finish</span><h3>Follow through</h3><p>Ambition is welcome, but reliability builds trust. Communicate clearly and finish the commitments you make.</p></article>
</div></div></section>
</main>
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Does this sound like your room?</h2><a class="btn btn-orange reveal" href="join.html">Apply to join</a></div><div class="footer-bottom"><a class="footer-brand" href="../index.html"><img class="footer-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="../script.js"></script>
</body>
</html>

36
pages/solutions.html Normal file
View File

@@ -0,0 +1,36 @@
<!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="Explore what the developers, designers, AI builders, and technical creators of Teppelin Labs build together.">
<title>What We Build - Teppelin Labs</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="../styles.css">
</head>
<body data-page="solutions">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="../index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="../index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Visitor path / What we build</p><p class="page-hero-copy">The collective works where software, design, artificial intelligence, and internet culture meet. We build to discover what technology can become next.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">01</b>Build</span><span>past the</span><span class="text-orange">expected.</span></h1></section>
<section class="section-tight"><div class="capability-grid reveal">
<article class="capability-card"><span class="meta">01 / Software</span><h2 class="card-title">Digital<br>products</h2><p class="body-copy">Useful, ambitious software shaped by strong engineering and deliberate interaction design.</p><ul><li>Web applications</li><li>Mobile products</li><li>Developer tools</li><li>Platforms and APIs</li></ul></article>
<article class="capability-card"><span class="meta">02 / Intelligence</span><h2 class="card-title">AI<br>systems</h2><p class="body-copy">Applied experiments that move models out of demos and into thoughtful, testable workflows.</p><ul><li>Agents and automation</li><li>Model interfaces</li><li>Evaluations</li><li>Applied research</li></ul></article>
<article class="capability-card"><span class="meta">03 / Experience</span><h2 class="card-title">Creative<br>technology</h2><p class="body-copy">New forms of expression built through code, motion, real-time graphics, and emerging media.</p><ul><li>Interactive experiences</li><li>Creative coding</li><li>3D and spatial</li><li>Experimental interfaces</li></ul></article>
</div></section>
<section class="section section-dark"><div class="intro-grid"><h2 class="section-title reveal">Projects begin<br>with a <span class="text-orange">spark.</span></h2><div class="intro-copy reveal reveal-delay"><p class="lede">A member shares an idea. Others sharpen it, test it, and decide whether to form a build team.</p><p class="body-copy">Some projects are weekend experiments. Others become open-source tools, serious products, collaborations, or new ventures. Teppelin gives each idea access to a wider range of technical and creative perspectives.</p></div></div></section>
<section class="section grid-surface"><p class="eyebrow reveal">How the collective contributes</p><div class="service-list reveal">
<div class="service-row"><span class="meta">A</span><h3>Start a lab</h3><p>Bring a clear idea, technical question, or creative provocation to the community.</p><span class="arrow">&#8599;</span></div>
<div class="service-row"><span class="meta">B</span><h3>Join a build</h3><p>Contribute your craft to an active member-led experiment or collaborative product.</p><span class="arrow">&#8599;</span></div>
<div class="service-row"><span class="meta">C</span><h3>Share knowledge</h3><p>Run a session, publish a breakdown, critique work, or help another builder move forward.</p><span class="arrow">&#8599;</span></div>
</div></section>
<section class="statement section-orange"><p class="reveal">We are less interested in predicting the future than in making enough things to discover it.</p><img class="statement-mark" src="../assets/brand/teppelin-script-t-mark.png" alt="" aria-hidden="true"></section>
</main>
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Have something worth exploring?</h2><a class="btn btn-orange reveal" href="contact.html">Collaborate with the lab</a></div><div class="footer-bottom"><a class="footer-brand" href="../index.html"><img class="footer-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="../script.js"></script>
</body>
</html>

26
pages/work.html Normal file
View File

@@ -0,0 +1,26 @@
<!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="The Teppelin Lab is where members explore AI, creative technology, open-source tools, and new digital experiences."><title>The Lab - Teppelin Labs</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="../styles.css">
</head>
<body data-page="work">
<a class="skip-link" href="#main">Skip to content</a><div class="scroll-progress" aria-hidden="true"><span></span></div><div class="cursor-dot" aria-hidden="true"></div><div class="cursor-ring" aria-hidden="true"></div>
<header class="site-header"><a class="brand" href="../index.html" aria-label="Teppelin Labs home"><img class="brand-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><button class="menu-toggle" type="button" aria-label="Toggle navigation" aria-expanded="false"><span></span></button><nav class="site-nav" aria-label="Primary navigation"><span class="nav-divider">Explore</span><a href="../index.html" data-nav="home">About</a><a href="solutions.html" data-nav="solutions">Build</a><a href="work.html" data-nav="work">Lab</a><span class="nav-divider">Members</span><a href="methodology.html" data-nav="methodology">Collective</a><a class="nav-cta" href="join.html" data-nav="join">Apply</a></nav></header>
<main id="main">
<section class="page-hero grid-surface"><div class="page-hero-head reveal"><p class="eyebrow">Visitor path / The lab</p><p class="page-hero-copy">The lab is not a polished portfolio of invented outcomes. It is a living set of technical territories where members experiment, collaborate, and publish what they discover.</p></div><h1 class="page-title reveal reveal-delay"><span><b class="page-index">03</b>Ideas</span><span>become</span><span class="text-orange">evidence.</span></h1></section>
<section class="section"><div class="project-list">
<article class="project reveal"><div class="project-image project-visual project-visual-north" aria-label="Abstract visual for agentic systems"><span class="project-visual-code">LAB / 01</span><span class="project-visual-title">AGENT<br>STACKS</span><span class="project-visual-shape"></span><span class="project-visual-note">Applied AI / Evaluation / Interfaces</span></div><div class="project-info"><div><span class="project-number">01 / AGENTIC SYSTEMS</span><h2>From model to useful behavior.</h2><p>Exploring agents, tool use, memory, evaluation, reliability, and the interface patterns that make autonomous systems understandable.</p><div class="project-tags"><span>AI</span><span>Agents</span><span>Research</span></div></div><a class="btn" href="contact.html">Propose a collaboration</a></div></article>
<article class="project reveal"><div class="project-image project-visual project-visual-forme" aria-label="Abstract visual for creative technology"><span class="project-visual-code">LAB / 02</span><span class="project-visual-title">REAL<br>TIME</span><span class="project-visual-shape"></span><span class="project-visual-note">Motion / 3D / Generative systems</span></div><div class="project-info"><div><span class="project-number">02 / CREATIVE TECHNOLOGY</span><h2>Code as a visual material.</h2><p>Combining graphics, interaction, motion, sound, and computation to create expressive digital experiences that could not exist in static media.</p><div class="project-tags"><span>Creative code</span><span>WebGL</span><span>Motion</span></div></div><a class="btn" href="join.html">Build with us</a></div></article>
<article class="project reveal"><div class="project-image project-visual project-visual-axis" aria-label="Abstract visual for open tools"><span class="project-visual-code">LAB / 03</span><span class="project-visual-title">OPEN</span><span class="project-visual-shape"></span><span class="project-visual-note">Tools / Infrastructure / Knowledge</span></div><div class="project-info"><div><span class="project-number">03 / OPEN TOOLS</span><h2>Small tools, shared leverage.</h2><p>Building reusable software, templates, components, and technical knowledge that help other builders move faster and think more clearly.</p><div class="project-tags"><span>Open source</span><span>Devtools</span><span>Systems</span></div></div><a class="btn" href="contact.html">Bring an idea</a></div></article>
</div></section>
<section class="section section-orange"><div class="intro-grid"><h2 class="section-title reveal">Not case studies.<br>Active questions.</h2><div class="intro-copy reveal reveal-delay"><p class="lede">The lab will evolve as members publish real experiments, prototypes, repositories, and write-ups.</p><p class="body-copy">Until then, these territories communicate what Teppelin is actively interested in without pretending unfinished or fictional work is a client portfolio.</p><div class="button-row"><a class="btn" href="methodology.html">Inside the collective</a></div></div></div></section>
</main>
<footer class="site-footer"><div class="footer-cta"><h2 class="reveal">Bring a question worth building.</h2><a class="btn btn-orange reveal" href="contact.html">Collaborate with us</a></div><div class="footer-bottom"><a class="footer-brand" href="../index.html"><img class="footer-logo" src="../assets/brand/teppelin-full-logomark.png" alt="Teppelin Labs"></a><div class="footer-links"><a href="solutions.html">What we build</a><a href="work.html">The lab</a><a href="methodology.html">The collective</a><a href="join.html">Apply</a><a href="contact.html">Collaborate</a></div><p class="footer-meta">&copy; <span data-year></span> Teppelin Labs<br>Built online, worldwide</p></div></footer>
<script src="../script.js"></script>
</body>
</html>