ramka

Stories

Instagram-style stories: a horizontal row of avatars, each dissolving into a vertical video via crossfade="both" (the circle is not the 9:16 frame, so a geometry morph would look wrong). Inside the viewer, slides are a native snap scroller with a CSS view-timeline rotateY: cards hinge on their leading edge as they enter and on their trailing edge as they leave. Copy the Package files (index.ts, the .svelte files and lightbox.css) into your design system, then wire triggers in your app.

See also: Lightbox overview

Stories

  • Maya
  • Julian
  • Noor
  • Eli
  • Sam
  • Priya
  • Tomás
  • Aisha
import { Lightbox as Primitives } from '@ramka/svelte';
import Root from './Root.svelte';
import Trigger from './Trigger.svelte';
import Gallery from './Gallery.svelte';

export type { LightboxItem } from './Gallery.svelte';

/** Stories skin: the library primitives with a video-pausing Root, a circular Trigger and the composed Gallery. */
export const Lightbox = { ...Primitives, Root, Trigger, Gallery };