A project by Mario Vellandi
Modal windows are typically used for notifications and advertisements. But they'd also work for asides, callouts, mini-applications, games, and more. What if they could be hidden or unlocked with a secret code? Easter is a flexible modal system that does this. It runs as an imported script on a web page, and acts like a micro-CMS. Media can be independently-developed and loaded as "eggs".
Click here for a sample prototype modeled after the tech educational platform Boot.dev.
Like embedded video and analytics services, Easter media can be distributed on any webpage using an imported script. When combined with custom triggers and interactions, it allows being helpful and sparking intrigue, surprise, and joy. Although Easter can streamline lightweight media distribution across multiple internal web domains, perhaps the larger opportunity is with 3rd parties who can easily include content, promotions, games, or application functionality.
KeyboardPress Ctrl + H to trigger a simple modal.
Hidden ModalAt the top-left of the screen, click 5 times to the right of the logo or mobile menu button.
Hidden ControllerClick 5 times in the empty space at the top-right corner of the screen, in the navigation bar. Enter the Konami Contra code if you know it.
Easter's first implementation was inspired by the zsh plugin system, and was overly decoupled using separate repos, local web servers, and Tigris object storage in production. Although this worked, file caching became a problem.
Using the shadow-DOM was also explored. The key finding was that it'll selectively inherit properties from the parent document. Hosting media on 3rd party sites using shadow DOM requires setting reset styles and unique variable names that will unlikely conflict with the host.
The project was then rewritten as a simple monorepo, with additional features like a game controller and display for entering secret codes to unlock media.
Built with TypeScript, VueJS, and Vite. The system can display, trigger, and load independently-developed modals. Styling uses Tailwind and a host's stylesheets and images. For multiple domains, a shadow-DOM implementation has been successfully tested. For full-decoupling, the system can be adapted to dynamically load manifests and modules via server calls. This allows each usage to select the modals and affordances it's interested in, and load them on demand.
The modal fade-in uses a short (200ms) delay before showing content, unless the egg component explicitly signals readiness via a callback. This is a workaround for the lack of a true Vue Suspense or asset preloading mechanism. Eggs with images or assets can call the `notifyContentReady` prop to control when the modal appears, but most eggs will simply fade in after the delay. This may not be robust for long-loading assets.
Refactor egg registration to use dynamic imports for performance and bundle size reduction. Consider using a web server to list and serve available eggs.