SceneryStack¶

Create Highly Interactive Content for a Multimodal and Accessible Web¶

SceneryStack is an Typescript development framework for creating multimodal, accessible HTML5 web interactives. SceneryStack offers libraries suitable for general web interactive development, as well as those specifically tailored to STEM interactive simulations. Included is support for robust accessibility features like dynamic screen-reader descriptions and alternative input (e.g., keyboard navigation).

GET STARTED

The development libraries within SceneryStack were originally created by PhET Interactive Simulations to create educational interactive simulations. PhET continues to maintain and contribute to SceneryStack for the purposes of creating multimodal and accessible STEM interactives.

SceneryStack is in the early stages of transitioning to an independent open-source community, driven by a collective passion for a more people-friendly web.

Interactive simulation created by PhET using SceneryStack

Core Features: Flexibility and Accessibility¶

• 🖥️ Cross-Platform Capabilities with a layer to shield from bugs and quirks of modern browsers.
• ⬇️ Downloadable, Fully Offline, Single-File Artifacts
• 🎨 Pixel-Perfect Design & Color Profile Support: Including optimization for high pixel density devices.
• 🎭 CSS Abstraction & Animation Support using the Twixt library.
• 🔍 TypeScript Integration ensuring type safety & autocomplete.
• 🔄 Declarative APIs for optimal performance/quality adjustments.
• ⚡ Real-Time Updates and tracing dependencies using the Axon library
• 🖱️ Enhanced Touch and Mouse Areas and extended touch handling including Swipe-to-Snag functionality.
• ⌨️ Extendable Input System that upholds foundational accessibility.
• 🛠️ Rich Component Library with support for accessibiltiy and to build your own.
• 🎬 Support for Multiple Rendering with seamless functionality across SVG and Canvas, and increasing WebGL support.
• 📐 Innovative Layout Engine with advanced layout, shape computations, and CAG for interface components.
• 🖼️ Enhanced iframe Support with easier user interaction in the iframe.
• 📊 Support for Charts and Graphs using the Bamboo library.
• ⌨️ API to Specify Keyboard Traversal Order
• 📖 Novel and Effective Screen Reader Access using the research-backed Parallel Document Object Model (PDOM) ensuring robust screen reader accessibility (Experience "Interactive Description")
• 🗣️ Customizable, Dynamic Spoken Content through Web Speech (Experience "Voicing")
• ⏹️ Interactive Highlighting: extends visual accessibility features inherent to keyboard/focus input to pointer/touch.
• 🔍 In-App Zooming Features: Pinch-to-zoom and panning
• 🔊 Multimodal Libraries Dedicated library (Tambo) for integrating Web Audio, including support for screen-focused audio and and sound modulation, as well as a library of UI sounds. Computer vision support for hand/body gesture control (Tangible). Experimental support for Vibration API (Tappi).

Getting Started¶

GET STARTED

Learn how to use SceneryStack in your web project or leverage the entire stack for your next highly interactive experience.

Choose your development path and get started.

Interactive simulation created by PhET using SceneryStack

Community and Contributing 🤝¶

Looking to chat with others using SceneryStack, contribute to the community, or just need to ask some questions?

🌍 Join the Community 🌍

FAQs¶

Head over to Frequently Asked Questions for questions asked about developing in the SceneryStack framework and SceneryStack generally.

Interactive Music Video by @jessegreenberg using SceneryStack - Try it here in the browser!

License¶

The libraries contained within SceneryStack, including this website, are under the MIT License and freely available for use by anyone. Authors using SceneryStack may choose any license for their creations.

Interactive simulation created by PhET using SceneryStack