apertureInterrupt beautifully.
Open. Close. Change your mind halfway. Transitions continue from their current frame, so the interface keeps up with you.
A SMALL LIBRARY. A BIG ENTRANCE.
The space
between
is everything.
Turn a change of scene into a moment.
Expressive transitions
for people who
care how the web feels.
TypeScript core optional GSAP / made by Bolted
ENTER WITH INTENTION.LEAVE AN IMPRESSION.KEEP PEOPLE IN CONTROL.
Give the motion
somewhere to go.
Three small worlds. Three ways to explore.
Open one and follow
your curiosity.
Original concept sites, built to show the library in use.
Make it yours
Five ways in.
Endless ways to make it yours.
Pick a shape. Play with the feeling.
Everything here runs on
the library.
Folded Iris
A moment waiting to happen.
CLOSED
Under the surfaceYOUR LIVE CONFIGURATION
All the expression.
Room to change your mind.
Respect the room.
System reduced-motion preferences are honored. The geometry responds to its container, from a thumbnail to a full viewport.
Bring your own world.
Your content stays in the DOM. Reveal text, images, or an entire view. Use the native driver, or plug into GSAP.
A small API.
A wide-open
canvas.
Start with a container and its content.
Aperture takes care of
the reveal.
Local package · MIT · npm release coming later
Read the integration guide
NO REQUIRED RUNTIME DEPENDENCIESESM + TYPES
Everything you need to keep control.
- open(origin?)
- Reveal from a point or an element. Returns a completion result.
- close() / toggle()
- Reverse smoothly, including while an animation is running.
- seek(0…1)
- Take direct control of the progress for a scrubber or timeline.
- setOptions({...})
- Change the shape, timing, origin, colors, and feel.
- destroy()
- Stop animation, remove listeners, and restore original styles.