• Updated 30 Oct, 21:11 UTC
  • Next run 31 Oct, 05:17 UTCNext 31 Oct 05:17
  • Last 7 days: 4 new models · 475 runs7 d: 4 models · 475 runs
Landing page for a cargo bike workshop

InklingThinking Machines

Network offOpen alone (new tab)

Run details

Model
thinkingmachines/inkling
Route
OpenRouter API, one user message
Served by
Together
Effort
high, OpenRouter's default for this model
Limits
60 min · 471,859 output tokens (the model's limit)
Date
27 Oct 2026
Time
59 s
Size
22 kB
Tokens
102 in, 8,008 out (973 of them thinking)
List price
$0.033 at today's price ($1 in / $4.05 out per M)
Paid
$0.033

Raw files: output · meta.json

Exact prompt

Build the landing page for Lumen Cycles, a Copenhagen workshop that builds custom cargo bikes to order. Make it look like a real brand you would trust with 4,000 euros.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

22 kB 686 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Lumen Cycles — Custom Cargo Bikes, Copenhagen</title>
<style>
  :root{
    --navy:#0b1220;
    --ink:#111;
    --cream:#f4f2ec;
    --paper:#fbfaf7;
    --brass:#bfa065;
    --brass-deep:#9a7b4f;
    --stone:#8a857d;
    --line:rgba(17,17,17,0.12);
    --line-light:rgba(255,255,255,0.08);
  }

  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
  }

  /* Typography */
  h1,h2,h3,.display{
    font-family:Georgia,"Times New Roman",serif;
    font-weight:400;
    letter-spacing:-0.03em;
    line-height:1.05;
  }
  .eyebrow{
    text-transform:uppercase;
    font-size:0.72rem;
    letter-spacing:0.18em;
    font-weight:600;
    color:var(--brass-deep);
  }
  p{max-width:52ch;}

  /* Layout helpers */
  .wrap{
    max-width:1280px;
    margin:0 auto;
    padding:0 6vw;
  }
  .grid-2{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
    gap:4rem 3rem;
  }
  .grid-3{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:3rem 2.5rem;
  }

  /* Header */
  header{
    position:fixed;
    top:0;left:0;right:0;
    z-index:100;
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:rgba(251,250,247,0.88);
    backdrop-filter:blur(12px) saturate(1.2);
    -webkit-backdrop-filter:blur(12px) saturate(1.2);
    border-bottom:1px solid var(--line);
    transition:transform .35s ease;
  }
  header.hide-up{transform:translateY(-100%);}
  .logo{
    font-family:Georgia,serif;
    font-size:1.35rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--navy);
    text-decoration:none;
  }
  nav ul{
    list-style:none;
    display:flex;
    gap:2.5rem;
  }
  nav a{
    text-decoration:none;
    color:var(--ink);
    font-size:0.82rem;
    letter-spacing:0.04em;
    position:relative;
  }
  nav a::after{
    content:"";
    position:absolute;
    bottom:-4px;left:0;width:0;height:1px;
    background:var(--brass);
    transition:width .3s ease;
  }
  nav a:hover::after{width:100%;}

  /* Hero */
  .hero{
    position:relative;
    background:linear-gradient(160deg,#0b1220 0%,#131b2e 60%,#1a2744 100%);
    color:var(--cream);
    overflow:hidden;
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:160px 0 120px;
  }
  .hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 70% 40%,rgba(191,160,101,0.10) 0%,transparent 55%);
    pointer-events:none;
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:6vw;
    align-items:center;
  }
  .hero-text{position:relative;z-index:2;}
  .hero h1{
    font-size:clamp(3.4rem,7vw,7rem);
    color:#fff;
    margin-bottom:1.2rem;
  }
  .hero h1 em{
    font-family:Georgia,serif;
    font-style:italic;
    color:var(--brass);
  }
  .hero-sub{
    font-size:1.15rem;
    color:#b8bdd1;
    max-width:42ch;
    margin-bottom:2.4rem;
    line-height:1.55;
  }
  .hero-cta{
    display:inline-flex;
    align-items:center;
    gap:0.75rem;
    background:var(--brass);
    color:var(--navy);
    text-decoration:none;
    padding:1rem 2.2rem;
    border-radius:2px;
    font-weight:600;
    font-size:0.9rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    transition:background .2s,transform .2s;
  }
  .hero-cta:hover{background:#d4b98a;transform:translateY(-2px);}
  .hero-visual{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .bike-svg{
    width:100%;
    height:auto;
    max-width:640px;
    filter:drop-shadow(0 30px 60px rgba(0,0,0,0.45));
  }

  /* Sections general */
  section{padding:120px 0;}
  section.dark{background:var(--navy);color:var(--cream);}
  section.dark h2{color:#fff;}
  section.dark .eyebrow{color:var(--brass);}

  .section-label{
    display:flex;
    align-items:center;
    gap:1rem;
    margin-bottom:1rem;
  }
  .section-label .line{
    flex:1;
    height:1px;
    background:var(--line);
  }
  section.dark .section-label .line{background:var(--line-light);}

  h2{
    font-size:clamp(2.2rem,4.5vw,3.8rem);
    margin-bottom:1.2rem;
    color:var(--ink);
  }
  h2 span{font-style:italic; color:var(--brass-deep);}

  /* Philosophy / Craft */
  .craft{
    background:var(--paper);
    border-bottom:1px solid var(--line);
  }
  .craft-grid{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:6vw;
    align-items:center;
  }
  .craft-img{
    position:relative;
  }
  .craft-img img, .craft-img svg{
    width:100%;
    height:auto;
    border-radius:4px;
    box-shadow:0 20px 50px rgba(11,18,32,0.08);
  }
  .craft-body{padding:1rem 0;}
  .craft-body p{margin-bottom:1.4rem; color:#444;}
  .craft-body p strong{color:var(--ink);}

  /* Features */
  .features{background:var(--cream);}
  .feature-card{
    border-top:1px solid var(--line);
    padding-top:2rem;
  }
  .feature-card h3{
    font-size:1.3rem;
    margin-bottom:0.6rem;
    color:var(--navy);
  }
  .feature-card p{color:#555; font-size:0.95rem;}

  /* Process */
  .process{background:linear-gradient(135deg,#f8f6f2 0%,#f0efe9 100%);}
  .step{
    position:relative;
    padding-left:2.2rem;
  }
  .step-num{
    position:absolute;
    left:0;top:0;
    font-family:Georgia,serif;
    font-size:2.2rem;
    color:var(--brass);
    line-height:1;
    opacity:0.6;
  }
  .step h3{
    font-size:1.15rem;
    margin-bottom:0.4rem;
  }
  .step p{font-size:0.95rem; color:#555;}

  /* Investment / Price */
  .investment{background:var(--navy); color:var(--cream); border-top:1px solid var(--line-light); border-bottom:1px solid var(--line-light);}
  .investment-grid{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:6vw;
    align-items:start;
  }
  .price-block{
    border:1px solid rgba(255,255,255,0.12);
    padding:3rem;
    border-radius:4px;
    background:rgba(255,255,255,0.02);
  }
  .price-block .label{font-size:0.75rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--brass); margin-bottom:0.5rem;}
  .price-block .amount{font-family:Georgia,serif; font-size:3.2rem; line-height:1;}
  .price-block .amount span{font-size:1.2rem; color:#8899aa;}
  .price-block ul{
    margin-top:1.5rem;
    list-style:none;
    font-size:0.9rem;
    color:#b8bdd1;
  }
  .price-block ul li{padding:0.35rem 0; border-bottom:1px solid rgba(255,255,255,0.06); display:flex; align-items:center; gap:0.75rem;}
  .price-block ul li::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--brass); flex-shrink:0;}
  .investment-text h2{color:#fff; margin-bottom:1.2rem;}
  .investment-text p{color:#b8bdd1; margin-bottom:1.2rem;}
  .investment-text a{color:var(--brass); text-decoration:none; border-bottom:1px solid rgba(191,160,101,0.4); padding-bottom:0.08rem;}
  .investment-text a:hover{border-color:var(--brass);}

  /* Workshop / Location */
  .workshop{background:var(--paper);}
  .workshop-grid{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:6vw;
    align-items:center;
  }
  .workshop-text p{margin-bottom:1.2rem; color:#333;}
  .workshop-text .meta{font-size:0.85rem; color:var(--stone); letter-spacing:0.03em;}
  .workshop-visual{
    position:relative;
  }
  .workshop-visual svg, .workshop-visual img{width:100%; height:auto; border-radius:4px;}

  /* Testimonial */
  .quote{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); text-align:center;}
  .quote blockquote{
    font-family:Georgia,serif;
    font-size:clamp(1.6rem,3.5vw,2.8rem);
    line-height:1.25;
    color:var(--navy);
    max-width:820px;
    margin:0 auto 2rem;
  }
  .quote cite{
    font-style:normal;
    font-size:0.85rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--stone);
  }

  /* Footer */
  footer{
    background:var(--navy);
    color:#8899aa;
    padding:80px 0 40px;
  }
  .footer-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
    gap:3rem;
    margin-bottom:4rem;
  }
  footer .logo{color:#fff; margin-bottom:0.5rem;}
  footer p{font-size:0.85rem; max-width:320px;}
  .footer-nav{
    display:flex;
    gap:4rem;
  }
  .footer-nav h4{
    font-size:0.75rem;
    letter-spacing:0.15em;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:1rem;
  }
  .footer-nav ul{list-style:none;}
  .footer-nav li{margin-bottom:0.4rem;}
  .footer-nav a{
    color:#8899aa;
    text-decoration:none;
    font-size:0.85rem;
    transition:color .2s;
  }
  .footer-nav a:hover{color:var(--brass);}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,0.08);
    padding-top:1.5rem;
    display:flex;
    justify-content:space-between;
    font-size:0.78rem;
  }

  /* Scroll reveal */
  .reveal{
    opacity:0;
    transform:translateY(24px);
    animation:revealUp .9s ease forwards;
  }
  @keyframes revealUp{
    to{opacity:1; transform:translateY(0);}
  }

  /* Mobile */
  @media(max-width:920px){
    .hero-grid, .craft-grid, .investment-grid, .workshop-grid{grid-template-columns:1fr;}
    .hero-visual{margin-top:3rem;}
    nav ul{display:none;}
    .hero h1{font-size:3rem;}
    .footer-top{flex-direction:column;}
  }
</style>
</head>
<body>

<header id="header">
  <a href="#" class="logo" aria-label="Lumen Cycles home">Lumen Cycles</a>
  <nav aria-label="Primary">
    <ul>
      <li><a href="#craft">Craft</a></li>
      <li><a href="#features">Build</a></li>
      <li><a href="#process">Process</a></li>
      <li><a href="#investment">Order</a></li>
      <li><a href="#workshop">Workshop</a></li>
    </ul>
  </nav>
</header>

<main>
  <section class="hero" aria-label="Introduction">
    <div class="wrap hero-grid">
      <div class="hero-text">
        <p class="eyebrow">Copenhagen Workshop</p>
        <h1>Custom cargo bikes. <em>Built to order.</em></h1>
        <p class="hero-sub">
          Every frame is welded, aligned, and finished in our Nørrebro workshop. Designed around your life, not the other way around.
        </p>
        <a href="#investment" class="hero-cta">Configure your build</a>
      </div>
      <div class="hero-visual">
        <!-- Inline SVG: elegant long-tail cargo bike -->
        <svg class="bike-svg" viewBox="0 0 720 400" xmlns="http://www.w3.org/2000/svg" aria-label="Illustration of a custom cargo bike">
          <defs>
            <linearGradient id="bikeGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stop-color="#e8e4da"/>
              <stop offset="100%" stop-color="#c8c4ba"/>
            </linearGradient>
            <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
              <feDropShadow dx="0" dy="18" stdDeviation="22" flood-color="#000000" flood-opacity="0.35"/>
            </filter>
          </defs>
          <!-- Ground line -->
          <line x1="60" y1="300" x2="660" y2="300" stroke="#d6d3c8" stroke-width="2"/>
          <!-- Rear wheel -->
          <circle cx="160" cy="300" r="62" fill="none" stroke="#bfa065" stroke-width="4"/>
          <circle cx="160" cy="300" r="10" fill="#0b1220"/>
          <circle cx="160" cy="300" r="28" fill="none" stroke="#bfa065" stroke-width="1"/>
          <!-- Frame -->
          <path d="M 160 300 L 380 150 L 540 200 L 440 290" fill="none" stroke="url(#bikeGrad)" stroke-width="14" stroke-linecap="round" stroke-linejoin="round"/>
          <path d="M 380 150 L 480 160 L 460 220 L 380 200" fill="none" stroke="#bfa065" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/>
          <!-- Box (cargo) -->
          <rect x="420" y="210" width="120" height="70" rx="6" fill="#f0ede6" stroke="#bfa065" stroke-width="3"/>
          <rect x="425" y="215" width="110" height="60" rx="4" fill="#fbfaf7" stroke="#e6dcc8" stroke-width="1"/>
          <!-- Front wheel -->
          <circle cx="500" cy="300" r="62" fill="none" stroke="#bfa065" stroke-width="4"/>
          <circle cx="500" cy="300" r="10" fill="#0b1220"/>
          <circle cx="500" cy="300" r="28" fill="none" stroke="#bfa065" stroke-width="1"/>
          <!-- Handlebars -->
          <path d="M 540 200 Q 580 140 620 150" fill="none" stroke="#bfa065" stroke-width="5" stroke-linecap="round"/>
          <path d="M 620 150 L 640 150" fill="none" stroke="#d4b98a" stroke-width="4"/>
          <!-- Seat -->
          <path d="M 340 220 L 300 230 L 290 210" fill="#c5a880" stroke="#9a7b4f" stroke-width="2"/>
          <!-- Pedals / chain -->
          <circle cx="250" cy="270" r="12" fill="none" stroke="#bfa065" stroke-width="3"/>
          <line x1="250" y1="270" x2="380" y2="200" stroke="#d4b98a" stroke-width="2"/>
        </svg>
      </div>
    </div>
  </section>

  <section class="craft" id="craft" aria-label="Our craft">
    <div class="wrap craft-grid">
      <div class="craft-img reveal">
        <svg viewBox="0 0 600 720" xmlns="http://www.w3.org/2000/svg" aria-label="Workshop detail">
          <rect width="600" height="720" fill="#eae8e1"/>
          <rect x="60" y="60" width="480" height="600" fill="#f4f2ec" stroke="#d6d3c8" stroke-width="4"/>
          <line x1="80" y1="220" x2="520" y2="220" stroke="#c5bba8" stroke-width="1"/>
          <line x1="80" y1="440" x2="520" y2="440" stroke="#c5bba8" stroke-width="1"/>
          <!-- Abstract tools / frames -->
          <rect x="120" y="100" width="60" height="320" rx="3" fill="#0b1220" opacity="0.9"/>
          <rect x="220" y="140" width="40" height="240" rx="2" fill="#bfa065" opacity="0.9"/>
          <rect x="360" y="120" width="80" height="300" rx="4" fill="#d6d3c8"/>
          <!-- Text details -->
          <text x="300" y="580" text-anchor="middle" font-family="Georgia, serif" font-size="22" fill="#9a7b4f" letter-spacing="6">WELDED BY HAND</text>
          <text x="300" y="610" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#8a857d" letter-spacing="3">NØRREBRO — COPENHAGEN</text>
        </svg>
      </div>
      <div class="craft-body reveal">
        <p class="eyebrow">The Philosophy</p>
        <h2>Built like it belongs <span>to the street.</span></h2>
        <p>
          We believe cargo bikes should feel like an extension of the rider, not an appliance. Every Lumen frame begins as a conversation — where do you live, what do you carry, how do you ride?
        </p>
        <p>
          We use <strong>chromoly steel</strong> for its resilience and repairability, and build boxes from <strong>hardwood and marine-grade plywood</strong> that ages with character. There is no assembly line. There is a bench, a torch, and a lot of patience.
        </p>
      </div>
    </div>
  </section>

  <section class="features" id="features" aria-label="Features">
    <div class="wrap">
      <div class="section-label reveal">
        <span class="line"></span>
        <span class="eyebrow">The Build</span>
        <span class="line"></span>
      </div>
      <h2 class="reveal">What you are paying for</h2>
      <div class="grid-3 reveal">
        <article class="feature-card">
          <h3>Tailored Geometry</h3>
          <p>We adjust head tube angle, wheelbase, and cargo box position to match your height, load, and riding style — not a standard mold.</p>
        </article>
        <article class="feature-card">
          <h3>Local Materials</h3>
          <p>Chromoly tubing sourced within Scandinavia, hardwood boxes built in-house, and finishes applied by hand in our workshop.</p>
        </article>
        <article class="feature-card">
          <h3>Lifetime Service</h3>
          <p>We remember every frame we build. Annual adjustments, repairs, and updates are part of the relationship.</p>
        </article>
      </div>
    </div>
  </section>

  <section class="process" id="process" aria-label="Process">
    <div class="wrap">
      <div class="section-label reveal">
        <span class="line"></span>
        <span class="eyebrow">Process</span>
        <span class="line"></span>
      </div>
      <h2 class="reveal">From order to delivery</h2>
      <div class="grid-3 reveal">
        <div class="step">
          <span class="step-num">01</span>
          <h3>Consultation</h3>
          <p>We meet (in person or by video) to understand your needs, measurements, and aesthetic preferences.</p>
        </div>
        <div class="step">
          <span class="step-num">02</span>
          <h3>Fabrication</h3>
          <p>Frame welding, box construction, and component selection take 6–8 weeks. You receive progress updates.</p>
        </div>
        <div class="step">
          <span class="step-num">03</span>
          <h3>Fitting & Delivery</h3>
          <p>A final fitting session at the workshop. We adjust, instruct, and send you home with a fully dialed bike.</p>
        </div>
      </div>
    </div>
  </section>

  <section class="investment dark" id="investment" aria-label="Pricing">
    <div class="wrap investment-grid">
      <div class="investment-text reveal">
        <h2>Invest in a frame that lasts <span>decades.</span></h2>
        <p>
          A Lumen cargo bike is not a seasonal purchase. It is a tool designed for daily life, weather, and time. The starting price reflects the labor of building one frame at a time, with no shortcuts.
        </p>
        <p>
          Most customers invest between <strong>€4,200</strong> and <strong>€5,800</strong>, depending on box size, component selection, and finish details.
        </p>
        <p>
          <a href="#workshop">Book an appointment</a> to discuss your build. We work on a small queue and take time with each order.
        </p>
      </div>
      <aside class="price-block reveal">
        <div class="label">Starting at</div>
        <div class="amount">€4,200 <span>incl. VAT</span></div>
        <ul>
          <li>Custom welded chromoly frame</li>
          <li>Hand-built hardwood cargo box</li>
          <li>Premium disc brake system</li>
          <li>Powder coat or hand-rubbed finish</li>
          <li>Lifetime workshop support</li>
        </ul>
      </aside>
    </div>
  </section>

  <section class="workshop" id="workshop" aria-label="Workshop">
    <div class="wrap workshop-grid">
      <div class="workshop-text reveal">
        <p class="eyebrow">Workshop</p>
        <h2>Visit us in <span>Nørrebro.</span></h2>
        <p>
          Our workshop sits on a quiet street near Assistens Cemetery. You can see frames in progress, talk materials, and test ride existing builds.
        </p>
        <p>
          We do not keep showroom stock. Every bike on the floor is a reference point, not a product to take away the same day.
        </p>
        <p class="meta">
          Jægersborggade 42 · 2200 Copenhagen N · By appointment
        </p>
      </div>
      <div class="workshop-visual reveal">
        <svg viewBox="0 0 520 420" xmlns="http://www.w3.org/2000/svg" aria-label="Workshop map illustration">
          <rect width="520" height="420" fill="#f0ede6"/>
          <!-- Abstract city grid -->
          <line x1="60" y1="100" x2="460" y2="100" stroke="#d6d3c8" stroke-width="2"/>
          <line x1="60" y1="200" x2="460" y2="200" stroke="#d6d3c8" stroke-width="2"/>
          <line x1="60" y1="300" x2="460" y2="300" stroke="#d6d3c8" stroke-width="2"/>
          <line x1="120" y1="60" x2="120" y2="360" stroke="#d6d3c8" stroke-width="2"/>
          <line x1="230" y1="60" x2="230" y2="360" stroke="#d6d3c8" stroke-width="2"/>
          <line x1="340" y1="60" x2="340" y2="360" stroke="#d6d3c8" stroke-width="2"/>
          <line x1="400" y1="60" x2="400" y2="360" stroke="#d6d3c8" stroke-width="2"/>
          <!-- Highlighted block -->
          <rect x="220" y="190" width="80" height="80" fill="#bfa065" opacity="0.15" stroke="#bfa065" stroke-width="2"/>
          <rect x="245" y="215" width="30" height="30" fill="#0b1220"/>
          <text x="260" y="260" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#0b1220" letter-spacing="2">WORKSHOP</text>
          <text x="260" y="150" text-anchor="middle" font-family="system-ui, sans-serif" font-size="11" fill="#8a857d">JÆGERSBORGG 42</text>
        </svg>
      </div>
    </div>
  </section>

  <section class="quote" aria-label="Testimonial">
    <div class="wrap reveal">
      <blockquote>
        “I have ridden cargo bikes for years. Nothing has felt this precise, this considered. It is the first bike I want to keep forever.”
      </blockquote>
      <cite>— Marias, Architect, Copenhagen</cite>
    </div>
  </section>
</main>

<footer>
  <div class="wrap">
    <div class="footer-top">
      <div>
        <a href="#" class="logo" aria-label="Lumen Cycles home">Lumen Cycles</a>
        <p>Custom cargo bicycles built to order in Copenhagen since 2019.</p>
      </div>
      <nav class="footer-nav" aria-label="Footer">
        <div>
          <h4>Explore</h4>
          <ul>
            <li><a href="#craft">Our Craft</a></li>
            <li><a href="#features">Build Details</a></li>
            <li><a href="#process">Process</a></li>
            <li><a href="#investment">Pricing</a></li>
          </ul>
        </div>
        <div>
          <h4>Contact</h4>
          <ul>
            <li><a href="#">hello@lumencycles.dk</a></li>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Book a visit</a></li>
          </ul>
        </div>
      </nav>
    </div>
    <div class="footer-bottom">
      <span>© Lumen Cycles 2025</span>
      <span>Copenhagen · Built slowly.</span>
    </div>
  </div>
</footer>

<script>
  // Header hide/show on scroll
  const header = document.getElementById('header');
  let lastScroll = 0;
  window.addEventListener('scroll', () => {
    const current = window.scrollY;
    if (current <= 10) {
      header.classList.remove('hide-up');
      return;
    }
    if (current > lastScroll && current > 120) {
      header.classList.add('hide-up');
    } else {
      header.classList.remove('hide-up');
    }
    lastScroll = current;
  });

  // Intersection observer for reveals
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.style.animationDelay = entry.target.dataset.delay || '0s';
        entry.target.classList.add('reveal');
      }
    });
  }, { threshold: 0.15 });

  document.querySelectorAll('section .reveal').forEach(el => {
    // Reset initial state for animation replay if desired
    el.style.animationDelay = '0s';
    observer.observe(el);
  });
</script>

</body>
</html>

Compare with

Inkling: other attempts