diff --git a/apps/demo/slides/slide-transitions-maximal/index.tsx b/apps/demo/slides/slide-transitions-maximal/index.tsx index b633de1..755b621 100644 --- a/apps/demo/slides/slide-transitions-maximal/index.tsx +++ b/apps/demo/slides/slide-transitions-maximal/index.tsx @@ -39,6 +39,58 @@ const FOOT: CSSProperties = { fontWeight: 500, }; +const Intro: Page = () => ( +
+
+
the transition api
+
preface
+
+
+
now shipping · v1.7.0
+

+ Introducing +
+ Transition + . +

+

+ A per-page animation API. Two keyframe arrays, one easing curve, every transformable + property the browser already understands — and the GPU does the rest. +

+
+
+ 00 · bloom + begin → +
+
+); + const Cover: Page = () => (
( maxWidth: 1100, }} > - Six effects you can’t draw in a binary slide format — every one in under twenty lines - of code, every one rendered by your browser, every frame still vector. + Eight effects you can’t draw in a binary slide format — every one in under twenty + lines of code, every one rendered by your browser, every frame still vector.

@@ -343,9 +395,90 @@ const Closing: Page = () => (
); +const Cli: Page = () => ( +
+
+
try it now
+
install
+
+
+
one command · zero config
+
+ $ + npx @open-slide/cli init +
+

+ Scaffolds the project, installs the runtime, drops you straight into the dev server. The + whole showcase is a few keystrokes away — yours to fork, remix, ship. +

+
+
+ 07 · cube + open-slide.dev +
+
+); + const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)'; const EASE_IN = 'cubic-bezier(0.7, 0, 0.84, 0)'; +// 0 · BLOOM — overexposure flash. Brightness + saturation spike alongside a heavy +// blur, resolving back to clarity. The page arrives bleached-out and settles in. +Intro.transition = { + duration: 820, + exit: { + duration: 340, + easing: EASE_IN, + keyframes: [ + { opacity: 1, transform: 'scale(1)', filter: 'brightness(1) blur(0) saturate(1)' }, + { + opacity: 0, + transform: 'scale(1.12)', + filter: 'brightness(3.6) blur(36px) saturate(0)', + }, + ], + }, + enter: { + duration: 600, + delay: 220, + easing: EASE_OUT, + keyframes: [ + { + opacity: 0, + transform: 'scale(1.28)', + filter: 'brightness(4) blur(48px) saturate(0)', + }, + { opacity: 1, transform: 'scale(1)', filter: 'brightness(1) blur(0) saturate(1)' }, + ], + }, +}; + // 1 · IRIS — clip-path circle collapses to a point, then expands. // Round-trip dimensions: 80% radius covers a 16:9 reference box corner-to-corner. Cover.transition = { @@ -550,9 +683,49 @@ Closing.transition = { }, }; +// 7 · CUBE — full 90° pivot on a vertical edge. The outgoing face swings away +// around its right edge; the inbound arrives rotated 90° around its left edge +// and squares up. Real 3D, no sprite sheet — far more aggressive than flip. +Cli.transition = { + duration: 880, + exit: { + duration: 440, + easing: EASE_IN, + keyframes: [ + { + opacity: 1, + transform: 'perspective(1800px) rotateY(0deg)', + transformOrigin: '100% 50%', + }, + { + opacity: 0.2, + transform: 'perspective(1800px) rotateY(-92deg)', + transformOrigin: '100% 50%', + }, + ], + }, + enter: { + duration: 560, + delay: 280, + easing: EASE_OUT, + keyframes: [ + { + opacity: 0.2, + transform: 'perspective(1800px) rotateY(92deg)', + transformOrigin: '0% 50%', + }, + { + opacity: 1, + transform: 'perspective(1800px) rotateY(0deg)', + transformOrigin: '0% 50%', + }, + ], + }, +}; + export const meta: SlideMeta = { - title: 'Maximal — Six Transitions', + title: 'Maximal — Eight Transitions', createdAt: '2026-05-24T00:00:00.000Z', }; -export default [Cover, Flip, Glitch, Warp, Sweep, Closing] satisfies Page[]; +export default [Intro, Cover, Flip, Glitch, Warp, Sweep, Closing, Cli] satisfies Page[];