Morphull is an Astro starter kit for building slide decks that use the View Transitions API to morph shared elements or perform full-page transitions between slides.
What is Morphull?
Morphull is a public Astro starter kit on GitHub that turns each slide of a presentation into its own Astro component and uses the browser-native View Transitions API to animate navigation between those slides. The kit runs as a static multi-page application (MPA) and includes a Slide.astro layout and a Controls.astro component for the next-arrow. The repository metadata lists the topics "css", "slides", and "view-transitions", and the project currently has 249 stars.
Key Features
- Morphing shared elements — Elements such as
<h1>headings, images, and links can morph between slides by giving them unique names in/src/styles/transitions.css; the browser then transitions between those matching elements. - Full-page transitions — Passing
animation="page"to theSlidelayout enables a full-page transition for that slide, and disables element-level morphing automatically. - Custom transition control — The starter writes two data attributes to
<html>:data-view-transition-direction(values: forward, back, reload) anddata-view-transition(values: page, element); you can target these in CSS to write custom animations, for example with open-props. - Built-in example — A working example of a custom page transition is provided at
src/pages/example-3.astro, complete with the CSS shown in the README. - MPA architecture — Every slide is a separate HTML page, so transitions rely on the View Transitions API for navigation rather than a client-side router.
- Reload guard — The README's example CSS uses
:not([data-view-transition-direction="reload"])so animations do not replay when a page is refreshed.
Who is it for?
- Front-end developers — who want to prototype a slide deck with view-transition animations quickly, reusing Astro components and CSS.
- Astro users — who are looking for a practical template that demonstrates MPA view transitions in a real project structure.
- Design engineers — who want to experiment with custom page-transition CSS using the exposed data attributes and open-props, using the included example as a starting point.
What can you do with Morphull?
- Build a slide deck — Add each slide as an
.astrocomponent in/pages; Morphull handles the next-arrow and transition wiring. - Customize which elements morph — Assign unique names in
transitions.cssto chosen elements (headings, images, code snippets) so they morph into their counterpart on the next slide. - Write per-slide page transitions — Use
animation="page"on a slide to replace element morphing with a full view-transition animation. - Define your own animations — Use the
data-view-transition-directionanddata-view-transitionattributes to style forward, back, and reload transitions with your own CSS keyframes.
How does Morphull work?
- Each slide is an Astro component placed in
/pages; theSlide.astrolayout wraps it andControls.astrorenders the navigation arrow. - On navigation, the browser's View Transitions API detects shared elements (identified by names in
transitions.css) and animates them; ifanimation="page"is set, the whole page transitions instead. - For custom transitions, Morphull sets two data attributes on
<html>—data-view-transition-directionanddata-view-transition— which you can style in your own CSS.
Pros and cons
- Pros: Transitions are handled by the browser, keeping custom JavaScript to a minimum; slides are simple Astro components; custom transitions only require CSS.
- Cons: The View Transitions API lacks cross-browser support today; Morphull currently only works in Chrome Canary with the
chrome://flags/#view-transition-on-navigationflag enabled.
FAQ
Does Morphull work in all browsers?
No. The View Transitions API used by Morphull is not yet supported across all browsers, so the starter kit only works in Chrome Canary with the chrome://flags/#view-transition-on-navigation flag turned on, as stated in the README.
What is the difference between animation="page" and default morphing?
By default, Morphull morphs shared elements between slides. When you pass animation="page" to the Slide layout, that slide uses a full-page transition instead, and element morphing is automatically disabled for that slide.
Can I write my own page transitions?
Yes. Morphull exposes two data attributes on the <html> element — data-view-transition-direction and data-view-transition — that you can target in CSS. The README shows an example using open-props and includes a working implementation in src/pages/example-3.astro.
What does data-view-transition-direction="reload" mean?
It tells the browser that a page refresh is occurring. The example CSS uses the selector html:not([data-view-transition-direction="reload"]) to prevent transitions from replaying on reload, and the README links to an ongoing W3C discussion about this behavior.
