@ogdakke/fluidbox
Finally, a fluid lightbox for the web.
Photos open from their thumbnails and close back into them. Pinch to zoom, swipe between slides, drag down to close. One runtime behind the React, Vue, Solid and Angular bindings, the custom elements and plain JavaScript.
pnpm add @ogdakke/fluidboxnpm install @ogdakke/fluidboxyarn add @ogdakke/fluidboxbun add @ogdakke/fluidbox11.7 kB gzipped with the React binding, not counting React. Opening the viewer loads 24.0 kB more, and the stylesheet is 3.2 kB. The sheet and the filmstrip load only when a viewer uses them.
- ←→ swipe
- pinchwheel zoom
- esc drag down to close
Shared element transitions
Media opens from its thumbnail and closes back into it, corners and all.
Familiar zoom gestures
Pinch, scroll wheel and double-tap, and switch between them mid-zoom.
Native gestures
Slides swipe on native CSS scroll snapping. Drag down to close.
Virtualization
Lists of any length. Fluidbox mounts only the slides and triggers in view.
Any media
Images, video, iframes and your own renderers.
Framework support
React, Vue, Solid and Angular, plus custom elements and plain JavaScript.
Playground
Open a photo, then change how the viewer behaves.
Framework support
Every binding runs the same eleven patterns on the same runtime.
React
→
Fluidbox.Root, triggers and portal parts; renderers keep your context.
Vue
→
Components and composables; the root slot gives you the state and the commands.
03
Solid
→
The same parts as Solid components, with accessors for state.
04
Angular
→
Standalone fluidbox* directives, zoneless and signal-based.
Elements
→
<fluidbox-gallery> markup with properties for sources, renderers
and extensions.
JavaScript
→
createFluidbox() and fluidbox.bind() on your own elements.
Roadmap
Fluidbox is pre-release, so any version can still break your code. 1.0 ends that.