Danilo Alessandro Vinciprova

Danilo Alessandro Vinciprova

AI-Assisted Web Developer · React · Next.js · Claude Code

I learned to think of building as parts that must fit together.

Project 04 / 06 · website

Streetlight Studios

A concept landing page for cinema-grade video ads. A concept, not client work.

Conceptlanding page · HTML, CSS, JavaScript

Overview

Screenshots

Evidence tier: Existing evidence

Streetlight Studios: screenshot of the home page, desktop (1440 px).
Streetlight Studios: screenshot of the home page, mobile (375 px).
Desktop 1440 × 900 and mobile 375 × 812, captured 29 September 2026 from the page's own source file (not online).
See proof

  1. Claim

    Streetlight Studios: a concept landing page for cinema-grade video ads. A concept, not client work.

    Stated by Danilo

  2. Evidence

  3. Result

    Real screenshots of the page, taken from its source file on 29/09/2026. That Danilo built it is his statement.

On this page

  1. 02 Motion breakdown: the opening, then its CSS animations taken apart
  2. 03 Code: the script behind the opening, and the reduced-motion rules

Not on this page

  • Live: the page is not online; it runs from its own source file.

Motion breakdown

First the opening as it runs; then each of its CSS animations, read from the page’s own stylesheet and laid out on one timeline.

Assembled: the opening as it runs

Evidence tier: Existing evidence

Screen recording of the Streetlight Studios page opening (7.6 s, no sound). Recorded on 29/09/2026 with Playwright from the page's own source file, from the first frame: loader, letterbox, headline.

Taken apart: every animation of the opening

Evidence tier: Existing evidence

Each bar starts at the rule’s delay and lasts its duration, counted from the moment the element appears. The numbers are read from the CSS excerpts below at build time; nothing is re-timed. The loading screen is then hidden by a script as soon as the hero video can play, or after 2.5 s at most (see Code).

Loading screen

  1. .loading-namefade-up · starts 0.2 s · runs 0.6 s · ease-out

  2. .loading-subfade-up · starts 0.4 s · runs 0.6 s · ease-out

  3. .loading-bar-wrapfade-up · starts 0.5 s · runs 0.4 s · ease-out

  4. .loading-bar-fillload-fill · starts 0.6 s · runs 1.8 s · ease-out

Letterbox bars

  1. .lb-tlb-t · starts 0.15 s · runs 0.95 s · cubic-bezier(.16,1,.3,1)

  2. .lb-blb-b · starts 0.15 s · runs 0.95 s · cubic-bezier(.16,1,.3,1)

Logo draw-in

  1. nav .logo .logo-svg circle[r="19"]logo-draw · starts 0.1 s · runs 1.2 s · cubic-bezier(.16,1,.3,1)

  2. nav .logo .logo-svg circle[r="8"]logo-draw · starts 0.5 s · runs 0.9 s · cubic-bezier(.16,1,.3,1)

  3. nav .logo .logo-svg circle:not([r="19"]):not([r="8"])logo-fade · starts 0.9 s · runs 0.4 s · ease

Headline line reveal

  1. .hero-h1 .line:nth-child(1) spanline-up · starts 0.15 s · runs 0.75 s · cubic-bezier(.16,1,.3,1)

  2. .hero-h1 .line:nth-child(2) spanline-up · starts 0.3 s · runs 0.75 s · cubic-bezier(.16,1,.3,1)

  3. .hero-h1 .line:nth-child(3) spanline-up · starts 0.45 s · runs 0.75 s · cubic-bezier(.16,1,.3,1)

mockup-cinema-ads.html lines 92–115

Raw text of mockup-cinema-ads.html, lines 92–115
.loading-name{
  font-family:var(--font-d);
  font-size:1.5rem;letter-spacing:.35em;
  text-transform:uppercase;color:var(--accent);
  animation:fade-up .6s ease-out .2s both;
}
.loading-sub{
  font-family:var(--font-m);
  font-size:.44rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--muted);
  animation:fade-up .6s ease-out .4s both;
}
.loading-bar-wrap{
  width:130px;height:1px;
  background:var(--border);
  position:relative;overflow:hidden;
  animation:fade-up .4s ease-out .5s both;
}
.loading-bar-fill{
  position:absolute;top:0;left:-100%;height:100%;
  background:linear-gradient(90deg,var(--deep),var(--accent));
  animation:load-fill 1.8s ease-out .6s forwards;
}
@keyframes load-fill{to{left:0}}

Evidence tier: Existing evidence

Streetlight source: loading screen (CSS) · copied 29 September 2026 · sha256 52ef13a6ef1e…

mockup-cinema-ads.html lines 137–142

Raw text of mockup-cinema-ads.html, lines 137–142
/* ── Letterbox ── */
.lb{position:fixed;left:0;right:0;height:52px;background:#000;z-index:9998}
.lb-t{top:0;animation:lb-t .95s cubic-bezier(.16,1,.3,1) .15s forwards}
.lb-b{bottom:0;animation:lb-b .95s cubic-bezier(.16,1,.3,1) .15s forwards}
@keyframes lb-t{to{transform:translateY(-100%)}}
@keyframes lb-b{to{transform:translateY(100%)}}

Evidence tier: Existing evidence

Streetlight source: letterbox bars (CSS) · copied 29 September 2026 · sha256 0bf140358bfa…

mockup-cinema-ads.html lines 317–331

Raw text of mockup-cinema-ads.html, lines 317–331
/* ── Logo draw-in stroke animation */
nav .logo .logo-svg circle[r="19"]{
  stroke-dasharray:120;stroke-dashoffset:120;
  animation:logo-draw 1.2s cubic-bezier(.16,1,.3,1) .1s both;
}
nav .logo .logo-svg circle[r="8"]{
  stroke-dasharray:51;stroke-dashoffset:51;
  animation:logo-draw .9s cubic-bezier(.16,1,.3,1) .5s both;
}
nav .logo .logo-svg circle:not([r="19"]):not([r="8"]){
  opacity:0;
  animation:logo-fade .4s ease .9s both;
}
@keyframes logo-draw{ to{ stroke-dashoffset:0; } }
@keyframes logo-fade{ to{ opacity:1; } }

Evidence tier: Existing evidence

Streetlight source: logo draw-in (CSS) · copied 29 September 2026 · sha256 96c44ffff475…

mockup-cinema-ads.html lines 443–452

Raw text of mockup-cinema-ads.html, lines 443–452
.hero-h1 .line span{
  display:block;
  animation:line-up .75s cubic-bezier(.16,1,.3,1) both;
}
.hero-h1 .line:nth-child(1) span{animation-delay:.15s}
.hero-h1 .line:nth-child(2) span{animation-delay:.3s}
.hero-h1 .line:nth-child(3) span{animation-delay:.45s}
.hero-h1 em{font-style:italic;color:transparent;-webkit-text-stroke:1.5px var(--accent)}
@keyframes line-up{from{transform:translateY(110%)}to{transform:translateY(0)}}
@keyframes fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

Evidence tier: Existing evidence

Streetlight source: headline line reveal (CSS) · copied 29 September 2026 · sha256 caa51e0e4493…

Code

The loading screen and the typewriter are small scripts. For visitors who ask for reduced motion, the loading screen is skipped, and the rules below switch off the hero animations and the film grain.

mockup-cinema-ads.html lines 2244–2262

Raw text of mockup-cinema-ads.html, lines 2244–2262
/* ══ 1. LOADING OVERLAY ══ */
(function(){
  const overlay = document.getElementById('loading-overlay');
  // Fix #17: instant hide for reduced-motion users
  if(window.matchMedia('(prefers-reduced-motion:reduce)').matches){
    overlay.style.display='none';
    return;
  }
  const heroVid = document.querySelector('#hero video');
  function hideOverlay(){
    overlay.classList.add('hide');
    setTimeout(()=>{ overlay.style.display='none'; },1000);
  }
  if(heroVid){
    heroVid.addEventListener('canplay', hideOverlay, {once:true});
    setTimeout(hideOverlay, 2500); // max wait 2.5s
  } else {
    setTimeout(hideOverlay, 1000);
  }

Evidence tier: Existing evidence

Streetlight source: hiding the loading screen (JavaScript) · copied 29 September 2026 · sha256 7d9ee7a85f0a…

mockup-cinema-ads.html lines 2486–2510

Raw text of mockup-cinema-ads.html, lines 2486–2510
})();

/* ══ 11. TYPEWRITER HERO BODY ══ */
(function(){
  const el = document.getElementById('hero-body-text');
  if(!el) return;
  const text = el.dataset.text || '';
  el.textContent = '';
  const cur = document.createElement('span');
  cur.className = 'typewriter-cursor';
  el.appendChild(cur);
  let i = 0;
  const delay = 1100; // start after hero headline animates
  setTimeout(()=>{
    const iv = setInterval(()=>{
      if(i<text.length){
        cur.before(document.createTextNode(text[i]));
        i++;
      } else {
        clearInterval(iv);
        setTimeout(()=>cur.remove(),1200);
      }
    }, 22);
  }, delay);
})();

Evidence tier: Existing evidence

Streetlight source: typewriter hero text (JavaScript) · copied 29 September 2026 · sha256 a4602fccc1cc…

mockup-cinema-ads.html lines 351–363

Raw text of mockup-cinema-ads.html, lines 351–363
@media (prefers-reduced-motion: reduce){
  .reveal,.hero-tag,.hero-body,.hero-ctas,.hero-trust{
    opacity:1!important;transform:none!important;animation:none!important;
  }
  .hero-h1 .line span{transform:none!important;animation:none!important;}
  .phone-card{animation:none!important;transform:none!important;}
  .phone-cards{transform:none!important;}
  .guarantee-badge-ring{animation:none!important;}
  body::after{animation:none!important;}
  .films-body,.pricing-desc,.guarantee-body,.cta-body,.hiw-body{
    opacity:1!important;transform:none!important;
  }
}

Evidence tier: Existing evidence

Streetlight source: reduced-motion rules (CSS) · copied 29 September 2026 · sha256 3700a4775390…