Components

Live Demo

Interact with the piano below. Click the keys to play sound (Web Audio API).

Integration Code

Credits

Inspired by lit-3d-piano by Rody Davis. This implementation is a lightweight, dependency-free adaptation using CSS 3D transforms instead of WebGL/Three.js.

Live Demo

Below is the <simple-greeting> component rendered directly in this page:

Integration Code

A live demo showing CSS and DOM isolation between a host page and a remote web component.

Live Demo: Tech Radar

This example embeds the Build Your Own Radar application, automatically loaded with this site’s tool data. It also auto-hides the “Powered by Thoughtworks” banner when viewed on the production domain.

Why use a Custom Wrapper?

While standard <iframe> tags are functional, wrapping them in a Web Component (<smart-iframe>) offers significant architectural advantages for a static site.

Pros (Strengths)

1. Improved User Experience (UX)