Features — Sticky Media Scroll

Installation

Variants

Schema

Type aliases exported from this item's source. Use these to shape the data you pass in.

interface StickyMediaSection {
  id: string
  title: string
  body: string
  rows: { name: string; detail: string }[]
}

Files installed (2)

• src/app/components/blocks/feature-sticky-media-scroll/feature-sticky-media-scroll.component.ts6.9 kB

  Copy

  // Deep-dive where the visual pins while the copy scrolls beside it, the pinned pane
  // swapping content as each section enters view, degrading to stacked pairs without
  // observers. Port of the React block 1:1.
  import {
    AfterViewInit,
    ChangeDetectionStrategy,
    Component,
    ElementRef,
    Input,
    OnDestroy,
    inject,
    signal,
  } from '@angular/core'
  import { cn } from '@/lib/utils'
  import { UiBadgeComponent } from '@/ui/badge/badge.component'
  import { UiButtonComponent } from '@/ui/button/button.component'
  import { UiCardComponent, UiCardContentComponent } from '@/ui/card/card.component'
  import { UiSeparatorComponent } from '@/ui/separator/separator.component'
  
  export interface StickyMediaSection {
    id: string
    title: string
    body: string
    rows: { name: string; detail: string }[]
  }
  
  const sections: StickyMediaSection[] = [
    {
      id: 'connect',
      title: 'Point at the warehouse',
      body: 'A read-only role is the whole integration. We mirror the schema, record freshness per table, and flag anything that looks abandoned before you model against it.',
      rows: [
        { name: 'warehouse.orders', detail: 'fresh · 2 min' },
        { name: 'warehouse.refunds', detail: 'fresh · 2 min' },
        { name: 'legacy.orders_v1', detail: 'stale · 41 days' },
      ],
    },
    {
      id: 'model',
      title: 'Write the definition once',
      body: 'Revenue, margin, and pipeline become files with owners. Every consumer resolves the same definition, so the exec summary and the close pack cannot disagree.',
      rows: [
        { name: 'revenue_net', detail: 'v128 · finance' },
        { name: 'margin_by_channel', detail: 'v41 · finance' },
        { name: 'pipeline_weighted', detail: 'v12 · revops' },
      ],
    },
    {
      id: 'serve',
      title: 'Serve it everywhere',
      body: 'Dashboards, scheduled exports, and the API read the same certified metric with the caller’s own scope applied, and each result carries the freshness it was served at.',
      rows: [
        { name: 'Exec summary', detail: 'live' },
        { name: 'Finance close pack', detail: 'live' },
        { name: 'Partner API', detail: 'live' },
      ],
    },
  ]
  
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-feature-sticky-media-scroll, [ui-feature-sticky-media-scroll]',
    standalone: true,
    // React renders the root <section> itself: the host stays out of layout and `class` goes to the root.
    host: { '[attr.class]': '"contents"' },
    imports: [UiBadgeComponent, UiButtonComponent, UiCardComponent, UiCardContentComponent, UiSeparatorComponent],
    template: `
      <section data-slot="feature-sticky-media-scroll" [class]="rootClass">
        <div class="mx-auto max-w-6xl px-6 py-20 lg:py-28">
          <div class="max-w-2xl">
            <span ui-badge variant="secondary">How it fits together</span>
            <h2 class="mt-4 text-3xl font-semibold tracking-tight sm:text-4xl">Three moves, in order</h2>
          </div>
  
          <div class="mt-12 grid gap-10 lg:grid-cols-2 lg:gap-16">
            <div class="space-y-20 lg:space-y-32">
              @for (section of allSections; track section.id; let i = $index) {
                <div [attr.data-section]="i" class="scroll-mt-32">
                  <p class="text-muted-foreground font-mono text-xs">{{ pad(i + 1) }}</p>
                  <h3 class="mt-2 text-2xl font-semibold tracking-tight text-balance">{{ section.title }}</h3>
                  <p class="text-muted-foreground mt-3 max-w-prose leading-relaxed">{{ section.body }}</p>
  
                  <!-- Inline card below the breakpoint, where nothing can pin usefully. -->
                  <div ui-card class="mt-5 lg:hidden">
                    <div ui-card-content class="p-0">
                      <ul class="divide-border divide-y">
                        @for (row of section.rows; track row.name) {
                          <li class="flex items-center justify-between gap-3 px-4 py-2.5">
                            <span class="min-w-0 truncate font-mono text-xs">{{ row.name }}</span>
                            <span class="text-muted-foreground shrink-0 text-xs">{{ row.detail }}</span>
                          </li>
                        }
                      </ul>
                    </div>
                  </div>
                </div>
              }
            </div>
  
            <div class="hidden lg:sticky lg:top-24 lg:block lg:h-fit">
              <div ui-card>
                <div ui-card-content class="p-0">
                  <div class="border-border text-muted-foreground border-b px-4 py-2.5 font-mono text-xs">
                    {{ allSections[active()]!.title }}
                  </div>
                  <ul class="divide-border min-h-[9rem] divide-y">
                    @for (row of allSections[active()]!.rows; track row.name) {
                      <li class="flex items-center justify-between gap-3 px-4 py-3">
                        <span class="min-w-0 truncate font-mono text-xs">{{ row.name }}</span>
                        <span class="text-muted-foreground shrink-0 text-xs">{{ row.detail }}</span>
                      </li>
                    }
                  </ul>
                  <ui-separator />
                  <p class="text-muted-foreground px-4 py-2.5 text-xs">
                    Step {{ active() + 1 }} of {{ allSections.length }}
                  </p>
                </div>
              </div>
            </div>
          </div>
  
          <button ui-button variant="outline" class="mt-12">Start the walkthrough</button>
        </div>
      </section>
    `,
  })
  export class UiFeatureStickyMediaScrollComponent implements AfterViewInit, OnDestroy {
    protected readonly allSections = sections
  
    private observer?: IntersectionObserver
  
    @Input() set initialActive(v: number) {
      if (Number.isInteger(v) && v >= 0 && v < sections.length) this.active.set(v)
    }
    @Input('class') className?: string
  
    readonly active = signal(0)
  
    private readonly host = inject(ElementRef<HTMLElement>)
  
    ngAfterViewInit(): void {
      // Without IntersectionObserver the pinned pane simply stays on the first
      // section and the page reads as stacked copy-and-visual pairs.
      if (typeof IntersectionObserver === 'undefined') return
      const targets = this.host.nativeElement.querySelectorAll('[data-section]')
      if (targets.length === 0) return
      this.observer = new IntersectionObserver(
        (entries) => {
          for (const entry of entries) {
            if (!entry.isIntersecting) continue
            const index = Number((entry.target as HTMLElement).dataset['section'])
            if (!Number.isNaN(index)) this.active.set(index)
          }
        },
        { rootMargin: '-45% 0px -45% 0px' },
      )
      targets.forEach((target: Element) => this.observer?.observe(target))
    }
  
    ngOnDestroy(): void {
      this.observer?.disconnect()
    }
  
    get rootClass(): string {
      return cn('bg-background', this.className)
    }
  
    pad(n: number): string {
      return String(n).padStart(2, '0')
    }
  
    setActive(index: number): void {
      if (index >= 0 && index < sections.length) this.active.set(index)
    }
  }
  

• src/app/components/blocks/feature-sticky-media-scroll/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/feature-sticky-media-scroll.json