Price first. Visit later.

Motion system

Where this comes from

Jetson's scroll timeline reads progress through framer-motion's scroll(); framer-motion is bundled but only its runtime is used. There is no GSAP, no ScrollTrigger, no Lenis and no Lottie on the site. The engines and tokens were read from the shipped bundles and stylesheets, then checked against our screen recordings of the home, Air and About pages.

Each of the 38 patterns below names the component we would reach for, with its link, and shows the literal GSAP config where a recipe is the right answer. Everything sits behind one reduced-motion guard, and nothing in a first viewport starts hidden.

Tokens

Jetson keeps six durations and seven curves in one token module and reuses them everywhere. We adopt the three durations and the two curves we need; the rest are listed so a recording can be read against them.

Scroll scenes

Pinned sections whose elements move with the scrollbar. Jetson has eighteen; ours become one ScrollTrigger timeline each, scrubbed 1:1, with Lenis underneath and never a captured wheel.

1. Scroll-timeline engine

   Every pinned scene on the home, Air, About, Water and Charge pages.

   • Triggerscroll, pinned
   • Durationscrubbed 1:1
   • Easingper-phase tokens
   • Movesticky at 100svh

   OursScrollTrigger, GSAP

   Details and recipe

   Trigger

   An IntersectionObserver wakes the scene; while it is on screen, scroll progress (0 to 1 over the wrapper's travel) drives a declarative table of phases per element.

   Values

   Scrub 1:1, no smoothing · pin: position sticky at 100svh inside a tall wrapper · per-phase curves from the easing tokens below · reduced motion renders the end state once.

   Ours

   ScrollTrigger, GSAP. One ScrollTrigger timeline per scene replaces the engine. Jetson pins with sticky; we let ScrollTrigger pin.

   gsap.timeline({
     scrollTrigger: {
       trigger: ".scene",
       start: "top top",
       end: "+=2700",
       pin: true,
       scrub: true,
       invalidateOnRefresh: true
     }
   })

2. Scroll snap to scene steps

   Pinned scenes with steps on the home, Air, About and How it works pages, desktop only (over 640px).

   • Triggerwheel, keys, swipe
   • Duration460–760ms
   • Easingglide
   • Moveto the next step

   OursScrollTrigger, GSAP Not adopted.

   Details and recipe

   Trigger

   Wheel, arrow and page keys and swipes are captured while a snap region is in view and glided to the next step.

   Values

   Glide min(760, 460 + 0.3 × distance) ms · cubic-bezier(0.65, 0, 0.35, 1) · off under reduced motion.

   Ours

   ScrollTrigger, GSAP. Not adopted. Our motion rules forbid scroll-jacking and Lenis stays native. When a scene needs steps, ScrollTrigger snaps after the hand stops and never takes the wheel:

   snap: {
     snapTo: [0.35, 0.68, 1],
     duration: {
       min: 0.46,
       max: 0.76
     },
     ease: "power2.inOut"
   }

3. Hero video clips into a window

   Home, “Your home. Upgraded.”

   • Triggerscroll
   • Duration30vh of travel
   • Easinglinear
   • Moveinset 24 / 308px

   OursScrollTrigger, GSAP

   Details and recipe

   Trigger

   The first 30vh of scroll; the hero is sticky at 100vh inside a 130vh wrapper.

   Values

   Clip-path inset 0 → 24px sides and 308px bottom, 20px radius · title moves 24px right and 308px up, copy mirrors it · press bar fades in · linear with scroll (about 270px at 900px tall).

   Ours

   ScrollTrigger, GSAP. Recipe. In our flow the headline stays put and the action never moves; only the window clips.

   gsap.timeline({
     scrollTrigger: {
       trigger: ".hero",
       start: "top top",
       end: "+=30%",
       scrub: true
     }
   })
     .to(".window", {
       clipPath: "inset(24px 24px 308px 24px round 20px)",
       ease: "none"
     }, 0)

4. Products row travels sideways

   Home, the three product cards under “Jetson brings heating, hot water and EV charging together”.

   • Triggerscroll, pinned, snap
   • Duration1,600px of travel
   • Easinglinear
   • Moverow about 840px

   OursScrollTrigger, GSAP

   Details and recipe

   Trigger

   A 250vh wrapper with a sticky row; the row moves over the last three quarters of the travel.

   Values

   Row x 0 → centred on the last card (about 840px at 1440) over about 1,600px of scroll · linear · snap steps at 0.25, 0.625 and 1 · the whole row scaled to fit the viewport height.

   Ours

   ScrollTrigger, GSAP. ScrollTrigger recipe with snap after the hand stops:

   gsap.to(".row", {
     x: () => innerWidth / 2 - lastCardCentre,
     ease: "none",
     scrollTrigger: {
       trigger: ".products",
       start: "top top",
       end: "bottom bottom",
       scrub: true,
       snap: [0.25, 0.625, 1]
     }
   })

5. Title lifts while the hub slides under it

   Home, “The brains.”

   • Triggerscroll, pinned
   • Duration1,156px of travel
   • Easinglinear
   • Movetitle −450px

   OursScroll Float, React Bits

   Details and recipe

   Trigger

   Pinned; the lift runs over the first 78% of the travel.

   Values

   Title y 0 → −450px over about 1,156px of scroll · linear.

   Ours

   Scroll Float, React Bits. Closest named piece is React Bits Scroll Float; plain GSAP is simpler:

   gsap.to(".title", {
     y: -450,
     ease: "none",
     scrollTrigger: {
       trigger: ".hub",
       start: "top top",
       end: "78% bottom",
       scrub: true
     }
   })

6. Collage slides in, centre window changes

   Home, “The next generation of your home.”

   • Triggerscroll
   • Duration80vh of travel
   • Easingsmoothstep
   • Movetiles 320px

   OursScrollTrigger, GSAP

   Details and recipe

   Trigger

   Not pinned: progress runs from the section top being 80vh below the viewport top until it reaches the top.

   Values

   Side columns translate in from off-grid to 0 in the second 40% of progress, top-left and bottom-right tiles 320px vertically · centre window clip widens, photo pans · smoothstep.

   Ours

   ScrollTrigger, GSAP. Recipe:

   gsap.timeline({
     scrollTrigger: {
       trigger: ".next-gen",
       start: "top 80%",
       end: "top top",
       scrub: true
     }
   })
     .fromTo(".window", {
       clipPath: "inset(0 round 13px)"
     }, {
       clipPath: "inset(0 36% 0 23% round 13px)",
       ease: "power1.inOut",
       duration: .6
     }, 0)

7. App card expands to near full screen

   Home, “Your home, in your hands.”

   • Triggerscroll
   • Duration80vh of travel
   • Easingsmoothstep
   • Moveinset 32px

   OursScroll Expand, React Bits

   Details and recipe

   Trigger

   Not pinned; smoothstep over 80vh of scroll as the section arrives.

   Values

   Clip from edge-to-edge to inset 32px with a 16px radius; height 90vh → viewport minus 64px · photo scale 0.94 → 0.96 · labels track the edges.

   Ours

   Scroll Expand, React Bits. Config: startWidth 99, startHeight 95, endRadius 16, mediaZoom 1.04, scrollDistance 0.8, smoothing 0 (Jetson goes edge-to-inset, the inverse of the usual expand).

8. Quote card widens from the centre column

   Home, “Get your custom price fast.”

   • Triggerscroll, pinned
   • Duration120vh of travel
   • Easinglinear
   • Moveinset 356px → 0

   OursScrollTrigger, GSAP

   Details and recipe

   Trigger

   Sticky 100vh inside a 220vh wrapper; progress over 120vh.

   Values

   Card clip inset 0 356px → 0 with a 16px radius · text and actions fade in and settle · linear.

   Ours

   ScrollTrigger, GSAP. Recipe. Adopt the card; in our flow the quote action is visible from the start and never fades.

   gsap.timeline({
     scrollTrigger: {
       trigger: ".quote",
       start: "top top",
       end: "bottom bottom",
       scrub: true
     }
   })
     .fromTo(".card", {
       clipPath: "inset(0px 356px round 16px)"
     }, {
       clipPath: "inset(0px 0px round 16px)",
       ease: "none"
     }, 0)

9. Install window grows to the full frame

   Jetson Air, “Jetson Air installation”, after “We do it all.”

   • Triggerscroll, pinned
   • Duration2,700px of travel
   • Easingease-in-out cubic
   • Movewindow 600px → full

   OursScroll Expand, React Bits

   Details and recipe

   Trigger

   Pinned; a 3,600px wrapper gives 2,700px of travel at 1440×900.

   Values

   Window scaleX 600px → full width over 4–30% of the travel (about 700px of scroll), ease-in-out cubic · dim fades in · intro words split apart · description rises · final copy linear.

   Ours

   Scroll Expand, React Bits. Config: startWidth 42, startHeight 100, startRadius 16, endRadius 16, scrollDistance 3, holdDistance 0.35, overlayScrim 0.5, smoothing 0.

10. App window grows to full bleed

    Jetson Air, “Your whole home. In your hand.”

    • Triggerscroll, pinned
    • Duration1,160px of travel
    • Easingscrub token
    • Movewindow 346 → 1,376px

    OursScroll Expand, React Bits

    Details and recipe

    Trigger

    Pinned; 2,060px wrapper, 1,160px of travel.

    Values

    Window 346px → 1,376px wide · headline and caption scale from a 1,728px artboard and slide from the window corner · cubic-bezier(0.3333, 0, 0.6667, 1) over the whole scene, photo on smoothstep.

    Ours

    Scroll Expand, React Bits. Config: startWidth 24, startHeight 58, scrollDistance 1.3, plus one GSAP tween for the headline scale.

11. Photo shrinks into a framed card, columns slide in

    Jetson Air, “Not oversized. Just the right size.”

    • Triggerscroll, pinned, snap
    • Duration3,525px of travel
    • Easingscrub token
    • Moveclip 27.5% sides

    OursScrollTrigger, GSAP

    Details and recipe

    Trigger

    Pinned; 4,425px wrapper (3,525px of travel) with snap steps.

    Values

    Clip-path inset 0 → about 5% top and bottom, 27.5% sides, 16px radius, over the first 28% (about 995px) · then left and right columns from x ±32px and hidden to in place · cubic-bezier(0.3333, 0, 0.6667, 1).

    Ours

    ScrollTrigger, GSAP. Recipe; the snap settles after the hand stops:

    scrollTrigger: {
      trigger: ".sizing",
      start: "top top",
      end: "bottom bottom",
      scrub: true,
      snap: {
        snapTo: [0.3529, 0.6765, 1],
        duration: {
          min: 0.46,
          max: 0.76
        },
        ease: "power2.inOut"
      }
    }

12. Window scales up as two words split (phone only)

    Jetson Air, “Cleaner air, built in.”

    • Triggerscroll, pinned (phone)
    • Durationscrubbed
    • Easingease-in-out cubic
    • Movewords ± half the window

    OursScrollTrigger, GSAP

    Details and recipe

    Trigger

    Pinned; rows exist only under 640px, so the desktop scene is static.

    Values

    Window scale 0 → 1 over 6–50%, ease-in-out cubic · the two words move apart by half the window plus 16px and fade at 32–42% · copy appears at 60%.

    Ours

    ScrollTrigger, GSAP. ScrollTrigger inside gsap.matchMedia:

    mm.add("(max-width: 639px)", () => tl.fromTo(".window", {
      scale: 0
    }, {
      scale: 1,
      ease: "power2.inOut"
    }, 0.06)
      .to(".wordL", {
        y: -(h / 2 + 16),
        autoAlpha: 0
      }, 0.32)
      .to(".wordR", {
        y: h / 2 + 16,
        autoAlpha: 0
      }, 0.32))

13. Photo card opens from a small window

    Jetson Water “4x more efficient by design”; Jetson Charge “Charging that looks after itself.” and “One system. Way more than charging.”

    • Triggerscroll, pinned
    • Durationscrubbed
    • Easingreveal · glide on phone
    • Moveclip opens to the card

    OursScrollTrigger, GSAP

    Details and recipe

    Trigger

    The wrapper overlaps the previous section by 62vh on desktop (100vh on phone) and opens while it scrolls into place.

    Values

    Clip inset from a centred window to the full card, 16px radius · ease-out cubic on desktop, in-out on phone · copy reveals in 600ms after 400ms.

    Ours

    ScrollTrigger, GSAP. Recipe:

    gsap.timeline({
      scrollTrigger: {
        trigger: ".scroll-window",
        start: "top 62%",
        end: "top top",
        scrub: true
      }
    })
      .fromTo(".mask", {
        clipPath: "inset(0% 35% 70% 35% round 16px)"
      }, {
        clipPath: "inset(0% round 16px)",
        ease: "power3.out"
      })

14. Reserve call to action: window opens, a wash fades in

    Jetson Water and Charge, “Reserve your Jetson … today.”

    • Triggerscroll, pinned
    • Durationscrubbed
    • Easingease-out cubic
    • Movewash 0 → 1

    OursScrollTrigger, GSAP

    Details and recipe

    Trigger

    Overlaps 100vh at both ends; progress over the pin range.

    Values

    Mask inset (1 − f) × 50% sides and (1 − f) × 100% bottom → 0, f = min(1, 0.3 × viewport width ÷ card width), ease-out cubic in 16 steps · colour wash opacity 0 → 1 · copy at 97%.

    Ours

    ScrollTrigger, GSAP. Recipe. Our wash is a tone step of the ground, never a second colour.

    .fromTo(".mask", {
      clipPath: "inset(0% 35% 70% 35% round 16px)"
    }, {
      clipPath: "inset(0% round 16px)",
      ease: "power3.out"
    }, 0)
      .fromTo(".wash", {
        opacity: 0
      }, {
        opacity: 1,
        ease: "none"
      }, 0)

15. Phone mockup zooms down into place

    Jetson Charge, “The smartest thing in your garage, now in your pocket.”

    • Triggerscroll, pinned
    • Durationscrubbed
    • Easingease-out cubic
    • Movecopy −10vw, +10vh

    OursScrollTrigger, GSAP

    Details and recipe

    Trigger

    Overlaps 55vh; the finish is min(1, (0.55 × viewport height + 200) ÷ travel).

    Values

    Mockup x offset → 0, scale max(1, 0.9 × viewport height ÷ height) → 1 over 10–85% of the finish, ease-out cubic · copy from x −10vw, y +10vh and hidden to in place over 20–90% · button and note rise 16px at the end.

    Ours

    ScrollTrigger, GSAP. Recipe:

    gsap.timeline({
      scrollTrigger: {
        trigger: ".app",
        start: "top 55%",
        end: "bottom bottom",
        scrub: true
      }
    })
      .fromTo(".phone", {
        x: dx,
        scale: 0.9 * innerHeight / h
      }, {
        x: 0,
        scale: 1,
        ease: "power3.out"
      }, 0.1)
      .fromTo(".copy", {
        x: -0.1 * innerWidth,
        y: 0.1 * innerHeight,
        autoAlpha: 0
      }, {
        x: 0,
        y: 0,
        autoAlpha: 1
      }, 0.2)

16. Impact card grows, rows step through

    About, the Impact section.

    • Triggerscroll, pinned
    • Duration601px grow · 300ms rows
    • Easingscrub · standard
    • MovescaleX 0.3 → 1

    OursScroll Stack, React Bits

    Details and recipe

    Trigger

    Pinned; rows change at 46%, 61% and 89% of the travel.

    Values

    Card scaleX 0.3 × viewport width ÷ card width → 1 over the first 25% (about 600px), cubic-bezier(0.3333, 0, 0.6667, 1) · overlay reveals at 25–33% · each row step is a 300ms cubic-bezier(0.2, 0.7, 0.2, 1) translate; passed rows lift 36px and dim.

    Ours

    Scroll Stack, React Bits. Scroll Stack handles the row stepping (itemDistance 36, itemScale 0, baseScale 1); the card grow is one GSAP tween:

    gsap.fromTo(".card", {
      scaleX: .3
    }, {
      scaleX: 1,
      scrollTrigger: {
        trigger: ".impact",
        start: "top top",
        end: "+=25%",
        scrub: true
      }
    })

17. Frame scales up, crew photos rise

    About, “Join the crew” (desktop only; the phone version clips each photo open).

    • Triggerscroll, pinned
    • Durationscrubbed
    • Easinginout
    • Movephotos rise 48px

    OursScrollTrigger, GSAP

    Details and recipe

    Trigger

    Pinned on a section with 192px top padding; phases remapped to the remaining travel.

    Values

    Frame scaleX min(1, 0.24 × vw ÷ w), scaleY min(1, 0.32 × vh ÷ h) → 1 over 2–40% · van rises 48px at 42–56% · crew at 56–70% · copy rises 32px at 70–84% · cubic-bezier(0.645, 0.045, 0.355, 1).

    Ours

    ScrollTrigger, GSAP. Recipe:

    .fromTo(".frame", {
      scaleX: .24 * innerWidth / w,
      scaleY: .32 * innerHeight / h
    }, {
      scaleX: 1,
      scaleY: 1,
      ease: "power2.inOut"
    }, .02)
      .fromTo(".van", {
        y: 48,
        autoAlpha: 0
      }, {
        y: 0,
        autoAlpha: 1
      }, .42)
      .fromTo(".crew", {
        y: 48,
        autoAlpha: 0
      }, {
        y: 0,
        autoAlpha: 1
      }, .56)

18. Quote call to action dims as you scroll

    “Get your custom price fast.” on Jetson Air, How it works, Service areas, Resources and Reviews.

    • Triggerscroll, pinned
    • Duration848px of travel
    • Easinglinear
    • Moveopacity 0.5 → 0.6

    OursScrollTrigger, GSAP

    Details and recipe

    Trigger

    Pinned over the section; at 50% the headline swaps for the address form.

    Values

    Scrim opacity 0.5 → 0.6, linear over the travel (about 850px) · reduced motion holds 0.6 · phone scrim 0.3.

    Ours

    ScrollTrigger, GSAP. Recipe. In our flow the address field is the action: it is on screen from the start and never swapped in by scroll.

    gsap.fromTo(".dim", {
      opacity: .5
    }, {
      opacity: .6,
      ease: "none",
      scrollTrigger: {
        trigger: ".quote-cta",
        start: "top top",
        end: "bottom bottom",
        scrub: true
      }
    })

Reveals

Things that appear once as they enter the viewport. Our Hint allowance is one quiet rise per section below the first screen.

1. Section rise

   Headings and blocks on nine pages, for example “Half your energy goes to heating and cooling”.

   • Triggerenters viewport (80%)
   • Duration600ms
   • Easingstandard
   • Move16px rise · 50ms stagger

   OursAnimated Content, React Bits

   Details and recipe

   Trigger

   IntersectionObserver when the element's top passes 80% of the viewport; once; instant if already in view or at the page bottom; focus inside also reveals.

   Values

   translateY 16px → 0 and opacity 0 → 1 · 600ms · cubic-bezier(0.2, 0.7, 0.2, 1) · stagger 50ms per child, or 300ms in sequence mode.

   Ours

   Animated Content, React Bits. Config: distance 16, direction vertical, duration 0.6, ease power3.out, initialOpacity 0, threshold 0. Ours is 24px and once only: the one rise per section the Hint level allows.

2. Feature row and card stagger

   Jetson Water and Charge, the system features row and the “Everything handled” cards.

   • Triggerenters viewport (70%)
   • Duration600 / 760ms
   • Easingstandard
   • Move24px rise · 160px slide · 100–150ms stagger

   OursAnimated Content, React Bits

   Details and recipe

   Trigger

   Reveal at 70% of the viewport; re-arms when scrolled back above it.

   Values

   Features y 24px → 0 and fade, 600ms, 900ms + 100ms per item · cards x 160px → 0 and fade, 760ms, 400ms + 150ms per item · cubic-bezier(0.2, 0.7, 0.2, 1).

   Ours

   Animated Content, React Bits. Config: distance 160, direction horizontal, duration 0.76, delay 0.4, stagger 0.15. We keep once true: nothing re-hides.

3. Hero staged load-in

   Jetson Air, “Better air. All around.”

   • Triggerload
   • Duration600ms
   • Easingstandard
   • Movestages at 600 to 2,600ms

   OursFade Content, React Bits Not adopted above the fold.

   Details and recipe

   Trigger

   Timers after mount at 600, 1,500, 2,200 and 2,600ms; leaving the viewport or reduced motion jumps to the end.

   Values

   Opacity 0 → 1 per stage (title lines, rebate line, action, trust row) · 600ms · cubic-bezier(0.2, 0.7, 0.2, 1).

   Ours

   Fade Content, React Bits. Not adopted above the fold. Our first viewport never starts hidden and the action is never animated. Below the first screen: duration 600, easing ease-out, a delay per block.

4. Video plays when in view

   Home hero; Jetson Air “One system. Every season.” and “Everything handled”.

   • Triggerenters viewport (200px early)
   • Moveplay / pause on intersect

   OursScrollTrigger, GSAP

   Details and recipe

   Trigger

   One observer 200px early mounts the source; a second plays on intersect and pauses when out of view.

   Values

   preload none · muted · loop · playsinline · reduced motion never loads the source, the poster stays.

   Ours

   ScrollTrigger, GSAP. No component needed:

   ScrollTrigger.create({
     trigger: video,
     start: "top bottom",
     end: "bottom top",
     onToggle: s => s.isActive ? video.play() : video.pause()
   })

Text

Words that arrive in pieces. Only below the first screen, and only on headlines.

1. Statement text, grapheme by grapheme

   Jetson Air intro “One intelligent system”, the Water and Charge system lead, the home statements.

   • Triggerenters viewport (70%)
   • Duration200ms
   • Easingstandard
   • Move11.3ms per grapheme

   OursSplit Text, React Bits

   Details and recipe

   Trigger

   Reveal at 70% of the viewport; re-hides when scrolled back.

   Values

   Per grapheme opacity 0.5 (0.35 on dark, 0.45 on deep green) → 1 · 200ms · cubic-bezier(0.2, 0.7, 0.2, 1) · 11.3ms per grapheme, one extra step at each word boundary · the follow-up line starts 200ms after the last grapheme, then 400ms per bullet.

   Ours

   Split Text, React Bits. Config: splitType chars, from opacity 0.5, to 1, delay 11.3, duration 0.2, ease power2.out, rootMargin 0px 0px −30% 0px. Only on headlines below the first screen.

2. Intro overlay: lines appear, then the overlay lifts

   How it works, before “We handle everything.”

   • Triggerload, once per session
   • Duration600ms fade · 1,250ms lift
   • Easingstandard · move
   • Movelines 800ms apart

   OursSplit Text, React Bits Not adopted.

   Details and recipe

   Trigger

   On load, once per session; lines 800ms apart; leaves by itself after 3,400ms; any click, key, wheel, touch or scroll skips it.

   Values

   Lines appear in sequence · exit by fade 600ms (300ms when skipped), cubic-bezier(0.2, 0.7, 0.2, 1), or by lift translateY −100% in 1,250ms, cubic-bezier(0.65, 0, 0.25, 1) · never shown under reduced motion.

   Ours

   Split Text, React Bits. Not adopted. A curtain before the first paint is what our motion rules forbid: the first paint is the real page. If a line-by-line arrival is wanted lower down: Split Text with lines, from opacity 0 and y 16, delay 800, duration 0.6.

Navigation

The header, its menus and the in-page nav.

1. Products mega-menu drops with a clip

   The header's Products button on every page, desktop widths.

   • Triggerhover, click
   • Duration500ms open · 450ms close
   • Easingreveal
   • Moveclip from 56px · children +120ms

   OursCard Nav, React Bits

   Details and recipe

   Trigger

   Pointer enter or click; closes 220ms after the pointer leaves, on Escape or an outside click; unmounts 440ms later.

   Values

   Panel clip-path inset(0 0 calc(100% − 56px) 0 round 16px) → inset(0 round 16px) · 500ms open, 450ms close · cubic-bezier(0.22, 1, 0.36, 1) · children opacity and −6px → 0 after 120ms · card hover swaps thumbnail for photo in 300–400ms.

   Ours

   Card Nav, React Bits. Config: ease power3.out, height tween 0.5s, child stagger 0.12s.

2. Underline grows, arrow nudges

   Header links and text links everywhere.

   • Triggerhover, focus
   • Duration300ms
   • Easingreveal
   • Moveunderline 0 → 1 · arrow 4px

   OursPill Nav, React Bits

   Details and recipe

   Trigger

   Hover or focus-visible.

   Values

   Underline scaleX 0 → 1 from the left; the arrow moves 4px right · 300ms · cubic-bezier(0.22, 1, 0.36, 1) · the current page stays underlined · transition-none under reduced motion.

   Ours

   Pill Nav, React Bits. Plain CSS; React Bits Pill Nav is the nearest named piece and is more than this needs. Our links are underlined at rest, so we keep the arrow nudge only.

   .u {
     transform: scaleX(0);
     transform-origin: left;
     transition: transform .3s cubic-bezier(.22, 1, .36, 1);
   }
   a:hover .u, a:focus-visible .u {
     transform: scaleX(1);
   }

3. Header hides on scroll down, narrows at the top

   The fixed header on every page.

   • Triggerscroll direction
   • Duration600ms
   • Easingstandard
   • MovetranslateY −100%

   OursHide On Scroll by Ozer (interior.dev), 21st.dev

   Details and recipe

   Trigger

   Scroll, read each frame: always shown in the first 120px; hides after 12px down, returns after 8px up; narrows over the first 200px on desktop.

   Values

   translateY 0 → −100% · 600ms · cubic-bezier(0.2, 0.7, 0.2, 1) · the narrowing scrubs per frame.

   Ours

   Hide On Scroll by Ozer (interior.dev), 21st.dev. Config: thresholds 12 down and 8 up, showAbove 120, transition 0.6 with ease [0.2, 0.7, 0.2, 1].

4. Phone menu sweeps in with colour bands

   The menu button below desktop widths, on every page.

   • Triggermenu open, close
   • Duration1,250ms in · 600ms out
   • Easingemphasis · reveal
   • Moveitems 12px rise, 500–1,110ms

   OursStaggered Menu, React Bits

   Details and recipe

   Trigger

   Open and close; the menu stays mounted 1,000ms while closing.

   Values

   Panel translateY −100% → 0 over 1,250ms, cubic-bezier(0.5, 0, 0.1, 1) · four 80px bands scaleY 5 → 1, settled at 72% · items opacity and 12px rise, 600ms, cubic-bezier(0.22, 1, 0.36, 1), from 500ms to 1,110ms · out in 600ms after 220ms · bands hidden under reduced motion.

   Ours

   Staggered Menu, React Bits. Position top, retimed to the values above. Ours sweeps one ink and a tone step: never four colour bands.

5. Section nav with scroll-spy

   The in-page navs on How it works, Heat pump FAQ and Resources.

   • Triggersection link click
   • Durationbrowser smooth, 1,500ms cap
   • Moveactive at 40% of the viewport

   OursSticky Header by Ozer (interior.dev), 21st.dev

   Details and recipe

   Trigger

   A click turns on smooth scrolling until the scroll ends (1,500ms cap); the active link is the last section whose top is above 40% of the viewport.

   Values

   Native smooth scroll · class swap on the active link · no smoothing under reduced motion.

   Ours

   Sticky Header by Ozer (interior.dev), 21st.dev. The shell only; with Lenis the jump is lenis.scrollTo(target) and the spy is an IntersectionObserver with rootMargin 0px 0px −60% 0px.

6. Legacy navbar hide (Framer Motion)

   Old layouts only: the intake shell.

   • Triggerscroll direction
   • Duration300ms
   • Easingcubic-bezier(0.4, 0, 0.2, 1)
   • Movey −180

   OursHide On Scroll by Ozer (interior.dev), 21st.dev Not adopted

   Details and recipe

   Trigger

   Scroll direction.

   Values

   y −180 to hide, 0 to show · 300ms · cubic-bezier(0.4, 0, 0.2, 1) · a shared-layout morph on the address arrow · reduced motion not handled.

   Ours

   Hide On Scroll by Ozer (interior.dev), 21st.dev. Not adopted (legacy). Hide On Scroll above covers it.

Controls

Tabs, accordions, carousels and dialogs: the hand asks, the control answers.

1. Tabs: dot and colour swap

   Jetson Air system components, Home app features, About “What Jetson does”, the FAQ.

   • Triggerclick, arrow keys
   • Durationinstant
   • Movedot and colour swap

   OursAnimated Tabs by Edu Calvo (SmoothUI), 21st.dev

   Details and recipe

   Trigger

   Click or arrow keys.

   Values

   Label colour subtle → full · list dot opacity 0 → 1 · the panel swaps with no tween.

   Ours

   Animated Tabs by Edu Calvo (SmoothUI), 21st.dev. Indicator animation off to match the instant swap. This page's segment control is the same pattern.

2. Sticky panel with tabs bound to scroll steps

   Jetson Air, “Half your energy goes to heating and cooling”.

   • Triggerscroll snap, tab click
   • Duration460–760ms
   • Easingglide
   • Movesteps 0.2 / 0.6 / 1 vh

   OursAnimated Tabs by Build UI, 21st.dev

   Details and recipe

   Trigger

   Snap points at 0.2, 0.6 and 1 of the viewport inside a sticky panel; choosing a tab glides to its step.

   Values

   Glide min(760, 460 + 0.3 × distance) ms · cubic-bezier(0.65, 0, 0.35, 1) · bars preset at 62, 71 and 67% · tabs only under reduced motion.

   Ours

   Animated Tabs by Build UI, 21st.dev. The tab list only; drive the value from ScrollTrigger snap [0.2, 0.6, 1] in onUpdate. No wheel capture.

3. Accordion: the plus turns, the answer drops in

   FAQ blocks on eight pages (“Questions before you switch.”, “Jetson Care FAQs”).

   • Triggerclick
   • Duration300ms
   • Easingstandard · reveal
   • Move−8px → 0

   OursInteractive Accordion by Jatin Yadav, 21st.dev

   Details and recipe

   Trigger

   Click.

   Values

   Icon rotate 0 → 45° · 300ms · cubic-bezier(0.2, 0.7, 0.2, 1) · answer opacity 0 → 1 and −8px → 0 · 300ms · cubic-bezier(0.22, 1, 0.36, 1) · only for items the user opens · none under reduced motion.

   Ours

   Interactive Accordion by Jatin Yadav, 21st.dev. Config: transition duration 0.3, ease [0.22, 1, 0.36, 1], content from opacity 0 and y −8. The Origin UI accordion in the catalogue above gets the same timing.

4. Carousels on native scroll-snap

   “Trusted by 2,500+ homes”, “We handle everything”, feature rows, reviews by city.

   • Triggerdrag, arrows
   • Durationbrowser smooth
   • Movesnap-start · 4/5 width on phone

   OursCarousel, React Bits

   Details and recipe

   Trigger

   Horizontal scroll, a drag past 4px, or the arrows.

   Values

   snap-x mandatory, snap-start slides, four-fifths width on phone · smooth scroll when motion is allowed, instant under reduced motion · the active dot follows the nearest stop.

   Ours

   Carousel, React Bits. Config: autoplay false, loop false, round false; this is the drag-and-transform version. Jetson's native snap is lighter and what we prefer: CSS scroll-snap plus two arrow buttons.

5. Dialog and scrim fade

   Spec dialogs, the address modal, the location picker.

   • Triggeropen, close
   • Duration300ms
   • Easingease · standard
   • Movescrim 0 → 0.2

   OursFade Content, React Bits

   Details and recipe

   Trigger

   Open and close.

   Values

   Dialog opacity 0 → 1 · 300ms · ease · scrim 0 → 0.2 · 300ms · cubic-bezier(0.2, 0.7, 0.2, 1) · none under reduced motion.

   Ours

   Fade Content, React Bits. Config: duration 300, easing ease, no blur, on the dialog body; the sheet in the catalogue above fades the same way.

Feedback

Numbers, pulses and spinners.

1. Savings count-up with a track wipe

   The Jetson Water and Charge savings calculator.

   • Triggerenters viewport (92%)
   • Duration1,400ms
   • Easingease-out cubic
   • Moveafter 1,000ms

   OursCount Up, React Bits

   Details and recipe

   Trigger

   Reveal at 92% of the viewport; starts 1,000ms later; stops on focus or pointer.

   Values

   Value 0 → target · 1,400ms · ease-out cubic · track clip-path wipe 760ms, cubic-bezier(0.65, 0, 0.35, 1), after 250ms · label row rises 16px in 600ms · final value only under reduced motion.

   Ours

   Count Up, React Bits. Config: from 0, duration 1.4, delay 1, separator “,”. Ours counts only a number that changes (the price bar when a choice changes); a figure that is simply shown is set in place.

2. Map dots with a pulsing halo

   Service areas, “Now installing near you.”

   • Triggeralways
   • Duration3,200ms loop
   • Easingease-in-out
   • Movescale 0.85 → 1.3

   OursMarker by Wensity Labs, 21st.dev Not adopted.

   Details and recipe

   Trigger

   Always; infinite.

   Values

   Opacity 0.4 → 0.8 → 0.4 and scale 0.85 → 1.3 → 0.85 · 3,200ms · ease-in-out · each dot offset by a golden-ratio fraction of the loop · none under reduced motion.

   Ours

   Marker by Wensity Labs, 21st.dev. Not adopted. A loop that never settles. The pulse variant is the match if a brief ever asks; ours is a still dot with a halo on hover.

3. Legacy keyframes still in the stylesheet

   Jetson Air global CSS; nothing on the page uses them.

   • Triggernone
   • Duration300 / 780 / 800ms
   • Easingglide
   • Moveunused

   OursFade Content, React Bits

   Details and recipe

   Trigger

   None.

   Values

   Card select scale 0.95 → 1, 300ms · a 16px rise, 780ms, cubic-bezier(0.65, 0, 0.35, 1) · spinner 360° in 800ms, linear, infinite (the advisor and intake loading state).

   Ours

   Fade Content, React Bits. Nothing to adopt. A loading spinner is shown only past one second, and progress moves at an even pace.

Reduced motion

Jetson honours prefers-reduced-motion piece by piece: the scroll-timeline renders each scene's end state once and its sticky wrappers go static, the snap engine switches off, reveals drop their transitions, videos keep their posters and never load a source, the intro overlay is never shown and the halo stops. Two legacy pieces do not check it.

Ours is one rule, not a list. Every tween, pin and reveal lives inside gsap.matchMedia("(prefers-reduced-motion: no-preference)"); when the preference is set there is no Lenis and no tween, every scene renders its final frame in place, videos stay on their posters, and tabs and accordions swap instantly. Independent of the preference: nothing in the first viewport starts hidden, the action is never animated, and the page works with scripts off.