robots.txt
# As a condition of accessing this website, you agree to abide by the following
# content signals:
# (a) If a Content-Signal = yes, you may collect content for the corresponding
# use.
# (b) If a Content-Signal = no, you may not collect content for the
# corresponding use.
# (c) If the website operator does not include a Content-Signal for a
# corresponding use, the website operator neither grants nor restricts
# permission via Content-Signal with respect to the corresponding use.
# The content signals and their meanings are:
# search: building a search index and providing search results (e.g., returning
# hyperlinks and short excerpts from your website's contents). Search does not
# include providing AI-generated search summaries.
# ai-input: inputting content into one or more AI models (e.g., retrieval
# augmented generation, grounding, or other real-time taking of content for
# generative AI search answers).
# ai-train: training or fine-tuning AI models.
# use: how AI systems may consume the content (immediate, reference, or full).
# ANY RESTRICTIONS EXPRESSED VIA CONTENT SIGNALS ARE EXPRESS RESERVATIONS OF
# RIGHTS UNDER ARTICLE 4 OF THE EUROPEAN UNION DIRECTIVE 2019/790 ON COPYRIGHT
# AND RELATED RIGHTS IN THE DIGITAL SINGLE MARKET.
# BEGIN Cloudflare Managed content
User-agent: *
Content-Signal: search=yes,ai-train=no,use=reference
Allow: /
# Training crawlers
User-agent: Amazonbot
Disallow: /
User-agent: Applebot-Extended
Disallow: /
User-agent: Bytespider
Disallow: /
User-agent: CCBot
Disallow: /
User-agent: ClaudeBot
Disallow: /
User-agent: Diffbot
Disallow: /
User-agent: Google-Extended
Disallow: /
User-agent: GPTBot
Disallow: /
User-agent: omgili
Disallow: /
User-agent: anthropic-ai
Disallow: /
User-agent: Claude-Web
Disallow: /
User-agent: cohere-ai
Disallow: /
User-agent: MistralAI-Training
Disallow: /
User-agent: meta-externalagent
Disallow: /
User-agent: GoogleOther
Disallow: /
User-agent: Baiduspider
Disallow: /
User-agent: PetalBot
Disallow: /
User-agent: AwarioSmartBot
User-agent: AwarioRssBot
Disallow: /
User-agent: Google-CloudVertexBot
Disallow: /
User-agent: QualifiedBot
Disallow: /
User-agent: Cotoyogi
Disallow: /
User-agent: ICC-Crawler
Disallow: /
User-agent: atlassian-bot
Disallow: /
User-agent: FishBot
Disallow: /
User-agent: BorderxBot
Disallow: /
User-agent: NavuBot
Disallow: /
User-agent: SemrushBot-SWA
Disallow: /
User-agent: WARDBot
Disallow: /
User-agent: magpie-crawler
Disallow: /
User-agent: KimiBot
Disallow: /
User-agent: CitibotSiteCrawler
Disallow: /
# END Cloudflare Managed Content
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Night Watcher | Digital Craft Studio</title>
<meta
name="description"
content="A small studio shipping native desktop apps, web platforms and browser games. AgentPet, PlugTalk, Porthole, Arena Survivor, Hold the Trench, Honeyworks, Evolve Defense, Piggy Payday, Dungeon Workshop, Toy Line Tycoon, Shrine Guardians, Deep Breaker, Hook Harbor, Spirit Gourd, Spoonbreak, Overgrown, Timber Lodge, Skipstone, Whisker Wall, Knapsack Knight, Haystead, Beetle Barricade and Legion of Ages, all live."
/>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<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=Syne:wght@400;500;600;700;800&family=Lexend:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<script type="module" crossorigin src="/assets/main-Cqrp-Yvy.js"></script>
<link rel="modulepreload" crossorigin href="/assets/style-DJjV4JAu.js">
<link rel="modulepreload" crossorigin href="/assets/game-card-B3Hrpim4.js">
<link rel="stylesheet" crossorigin href="/assets/style-iVm8lNup.css">
<link rel="stylesheet" crossorigin href="/assets/game-card-BFW0sUQV.css">
</head>
<body class="bg-night text-text font-body antialiased">
<!-- Noise overlay -->
<div class="noise-overlay" aria-hidden="true"></div>
<!-- Scanline texture -->
<div class="scanlines" aria-hidden="true"></div>
<!-- Navigation -->
<nav
id="nav"
class="fixed top-0 left-0 w-full z-50 transition-all duration-500"
>
<div
class="max-w-7xl mx-auto px-6 lg:px-8 flex items-center justify-between h-20"
>
<a href="#" class="flex items-center gap-3 group">
<div class="eye-logo">
<div class="eye-logo-dot"></div>
</div>
<span class="font-display font-bold text-lg tracking-tight">
TNW<span class="text-primary">.</span>
</span>
</a>
<div class="hidden md:flex items-center gap-8">
<a href="#services" class="nav-link">Services</a>
<a href="#apps" class="nav-link">Apps</a>
<a href="/games/" class="nav-link">Games</a>
<a href="#about" class="nav-link">About</a>
<a href="/feedback.html" class="nav-link">Feedback</a>
<a href="#contact" class="nav-link">Contact</a>
</div>
<a
href="#contact"
class="hidden md:inline-flex items-center px-5 py-2.5 bg-primary/10 border border-primary/20 rounded-full text-primary text-sm font-medium hover:bg-primary/20 hover:border-primary/40 transition-all duration-300"
>
Start a Project
</a>
<!-- Mobile menu button -->
<button
id="menu-toggle"
class="md:hidden w-10 h-10 flex items-center justify-center"
aria-label="Toggle menu"
>
<div class="space-y-1.5">
<span
class="block w-6 h-0.5 bg-text transition-all duration-300 origin-center"
id="menu-line-1"
></span>
<span
class="block w-4 h-0.5 bg-text transition-all duration-300"
id="menu-line-2"
></span>
</div>
</button>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="mobile-menu-panel md:hidden">
<div class="flex flex-col items-center justify-center h-full gap-8">
<a
href="#services"
class="text-2xl font-display font-semibold text-muted hover:text-text transition-colors mobile-link"
>Services</a
>
<a
href="#apps"
class="text-2xl font-display font-semibold text-muted hover:text-text transition-colors mobile-link"
>Apps</a
>
<a
href="/games/"
class="text-2xl font-display font-semibold text-muted hover:text-text transition-colors mobile-link"
>Games</a
>
<a
href="#about"
class="text-2xl font-display font-semibold text-muted hover:text-text transition-colors mobile-link"
>About</a
>
<a
href="/feedback.html"
class="text-2xl font-display font-semibold text-muted hover:text-text transition-colors mobile-link"
>Feedback</a
>
<a
href="#contact"
class="text-2xl font-display font-semibold text-muted hover:text-text transition-colors mobile-link"
>Contact</a
>
<a
href="#contact"
class="mt-4 px-8 py-3 bg-primary/10 border border-primary/20 rounded-full text-primary font-medium mobile-link"
>Start a Project</a
>
</div>
</div>
</nav>
<!-- Hero -->
<section
class="hero relative min-h-screen flex items-center overflow-hidden"
>
<!-- Grid background -->
<div class="grid-bg" aria-hidden="true"></div>
<!-- Radar pulses -->
<div
class="absolute top-1/2 right-[12%] -translate-y-1/2 hidden lg:block"
aria-hidden="true"
>
<div class="radar-container">
<div class="radar-pulse"></div>
<div class="radar-pulse" style="animation-delay: 1s"></div>
<div class="radar-pulse" style="animation-delay: 2s"></div>
<div class="radar-dot"></div>
</div>
</div>
<!-- Gradient orbs -->
<div
class="absolute top-1/4 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-[120px] animate-float"
aria-hidden="true"
></div>
<div
class="absolute bottom-1/4 right-1/4 w-80 h-80 bg-accent/5 rounded-full blur-[100px] animate-float-delayed"
aria-hidden="true"
></div>
<div class="relative max-w-7xl mx-auto px-6 lg:px-8 pt-32 pb-20 w-full">
<div class="max-w-3xl">
<div class="reveal">
<span
class="inline-flex items-center gap-2 px-4 py-1.5 rounded-full border border-border bg-surface text-xs font-mono text-primary tracking-wider uppercase mb-8"
>
<span
class="w-1.5 h-1.5 rounded-full bg-primary animate-pulse"
></span>
Digital Craft Studio
</span>
</div>
<h1
class="font-display font-extrabold text-5xl sm:text-6xl lg:text-7xl xl:text-8xl leading-[0.95] tracking-tight reveal"
>
We build
<br />
<span class="text-primary">digital</span>
<br />
experiences
</h1>
<p
class="mt-8 text-lg sm:text-xl text-muted max-w-lg leading-relaxed reveal"
>
Native desktop apps, web platforms and games that run in a tab. Twenty
of them are live right now, built after dark and shipped to real
users.
</p>
<div class="flex flex-wrap gap-4 mt-10 reveal">
<a
href="#apps"
class="inline-flex items-center px-8 py-4 bg-primary text-night font-semibold rounded-sm hover:shadow-[0_0_30px_rgba(0,229,255,0.3)] transition-all duration-300"
>
See the Products
</a>
<a
href="#contact"
class="inline-flex items-center px-8 py-4 border border-border text-text font-semibold rounded-sm hover:border-muted hover:bg-surface transition-all duration-300"
>
Get in Touch
</a>
</div>
</div>
</div>
<!-- Scroll indicator -->
<div
class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 reveal"
>
<span class="text-xs font-mono text-dim tracking-widest uppercase"
>Scroll</span
>
<div
class="w-px h-12 bg-gradient-to-b from-primary/50 to-transparent animate-scroll-line"
></div>
</div>
</section>
<!-- Services -->
<section id="services" class="relative py-28 lg:py-36">
<div class="max-w-7xl mx-auto px-6 lg:px-8">
<div class="flex items-center gap-4 mb-4 reveal">
<div class="h-px w-12 bg-primary"></div>
<span class="font-mono text-sm text-primary tracking-wider uppercase"
>What we do</span
>
</div>
<h2
class="font-display font-bold text-4xl sm:text-5xl lg:text-6xl mb-20 reveal"
>
Services built<br />for the
<em class="text-accent not-italic">modern web</em>
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Service 1: Native Apps -->
<div
class="service-card group relative p-8 lg:p-10 bg-card/50 border border-border rounded-sm overflow-hidden hover:border-primary/30 transition-all duration-500 reveal"
>
<div
class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
></div>
<div class="relative">
<div
class="w-14 h-14 rounded-sm bg-primary/10 border border-primary/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"
>
<svg
class="w-7 h-7 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25"
/>
</svg>
</div>
<h3 class="font-display font-bold text-2xl mb-3">Native Apps</h3>
<p class="text-muted leading-relaxed">
Desktop apps that feel native because they are. Notarized,
auto-updating, and shipped through Homebrew or a signed DMG.
</p>
<div class="flex flex-wrap gap-2 mt-6">
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>macOS</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Windows</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Swift</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Tauri</span
>
</div>
</div>
</div>
<!-- Service 2: Web Platforms -->
<div
class="service-card group relative p-8 lg:p-10 bg-card/50 border border-border rounded-sm overflow-hidden hover:border-primary/30 transition-all duration-500 reveal"
>
<div
class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
></div>
<div class="relative">
<div
class="w-14 h-14 rounded-sm bg-primary/10 border border-primary/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"
>
<svg
class="w-7 h-7 text-primary"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M12 21a9.004 9.004 0 008.716-6.747M12 21a9.004 9.004 0 01-8.716-6.747M12 21c2.485 0 4.5-4.03 4.5-9S14.485 3 12 3m0 18c-2.485 0-4.5-4.03-4.5-9S9.515 3 12 3m0 0a8.997 8.997 0 017.843 4.582M12 3a8.997 8.997 0 00-7.843 4.582m15.686 0A11.953 11.953 0 0112 10.5c-2.998 0-5.74-1.1-7.843-2.918m15.686 0A8.959 8.959 0 0121 12c0 .778-.099 1.533-.284 2.253m0 0A17.919 17.919 0 0112 16.5c-3.162 0-6.133-.815-8.716-2.247m0 0A9.015 9.015 0 013 12c0-1.605.42-3.113 1.157-4.418"
/>
</svg>
</div>
<h3 class="font-display font-bold text-2xl mb-3">
Web Platforms
</h3>
<p class="text-muted leading-relaxed">
Full-stack apps, landing pages and APIs, running on the edge so
they stay fast wherever the user opens them.
</p>
<div class="flex flex-wrap gap-2 mt-6">
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Next.js</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>React</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Cloudflare</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>TypeScript</span
>
</div>
</div>
</div>
<!-- Service 3: UI & Motion -->
<div
class="service-card group relative p-8 lg:p-10 bg-card/50 border border-border rounded-sm overflow-hidden hover:border-accent/30 transition-all duration-500 reveal"
>
<div
class="absolute inset-0 bg-gradient-to-br from-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
></div>
<div class="relative">
<div
class="w-14 h-14 rounded-sm bg-accent/10 border border-accent/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-500"
>
<svg
class="w-7 h-7 text-accent"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
stroke-width="1.5"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M9.53 16.122a3 3 0 00-5.78 1.128 2.25 2.25 0 01-2.4 2.245 4.5 4.5 0 008.4-2.245c0-.399-.078-.78-.22-1.128zm0 0a15.998 15.998 0 003.388-1.62m-5.043-.025a15.994 15.994 0 011.622-3.395m3.42 3.42a15.995 15.995 0 004.764-4.648l3.876-5.814a1.151 1.151 0 00-1.597-1.597L14.146 6.32a15.996 15.996 0 00-4.649 4.763m3.42 3.42a6.776 6.776 0 00-3.42-3.42"
/>
</svg>
</div>
<h3 class="font-display font-bold text-2xl mb-3">
UI & Motion
</h3>
<p class="text-muted leading-relaxed">
Interfaces with a point of view. Type, spacing and motion tuned
until the product feels effortless to use.
</p>
<div class="flex flex-wrap gap-2 mt-6">
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Figma</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Design Systems</span
>
<span
class="px-3 py-1 text-xs font-mono bg-surface border border-border rounded-sm text-dim"
>Motion</span
>
</div>
</div>
</div>
<!-- Service 4: Browser Games -->
<div
class="service-card group relative p-8 lg:p-10 bg-card/50 border border-border rounded-sm overflow-hidden hover:border-accent/30 transition-all duration-500 reveal"
>
<div
class="absolute inset-0 bg-gradient-to-br from-accent/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"
></div>
<div class="relative">
<div
class="w-14 h-14 rounded-sm bg-accent/10 border border-accent/20 flex items-center justify-center mb-6 group-hover:scale-110 transition-tran