# component Projects at AI Tinkerers

> Canonical HTML: https://aitinkerers.org/technologies/component
> Markdown URL: https://aitinkerers.org/technologies/component.md
> Technology record last updated: 2026-05-15T18:53:52Z
> Generated: 2026-09-21T08:43:23Z

A standardized suite of browser APIs used to create encapsulated, reusable UI elements that function across any modern framework.

Component architecture leverages Custom Elements, Shadow DOM, and HTML Templates to build modular interfaces without global scope conflicts. By defining a custom tag (e.g., ), developers package logic and styles into a single, portable unit. This specification powers major design systems like Adobe Spectrum and Salesforce Lightning, ensuring 100% interoperability between React, Vue, and vanilla JavaScript environments. It eliminates the overhead of proprietary library lock-in by utilizing the browser's native rendering engine for high-performance UI delivery.

- Official technology site: https://www.webcomponents.org/
- Public AI Tinkerers demos and talks: 1
- Result page: 1 of 1

## Recent Public Talks and Demos

### [Building Product Videos with Code: From React to Launch Video in 5 Minutes](https://zurich.aitinkerers.org/talks/rsvp_dcRr36x9-9s)

A programmatic video production pipeline using Remotion that lets you build product launch videos entirely in code. I'll walk through a live coding session where we build a video from scratch: composing scenes as React components, reusing existing web app UI components directly in video compositions, generating AI narration with ElevenLabs, syncing text transitions to the beat of a backing track, and rendering the final output. The demo shows how your easy it is to create launch videos for new features, based on the code of the feature.

- Event context: AI Tinkerers Zürich: July Build Night with Swisscom Ventures — 2026-07-01 — Zürich
- Public talk page: https://zurich.aitinkerers.org/talks/rsvp_dcRr36x9-9s

## Related Technologies

- [ElevenLabs](https://aitinkerers.org/technologies/elevenlabs) ([Markdown](https://aitinkerers.org/technologies/elevenlabs.md)) — 42 public demos
- [React](https://aitinkerers.org/technologies/react) ([Markdown](https://aitinkerers.org/technologies/react.md)) — 219 public demos
- [Remotion](https://aitinkerers.org/technologies/remotion) ([Markdown](https://aitinkerers.org/technologies/remotion.md)) — 4 public demos
- [Tailwind CSS](https://aitinkerers.org/technologies/tailwind-css) ([Markdown](https://aitinkerers.org/technologies/tailwind-css.md)) — 22 public demos
- [Three](https://aitinkerers.org/technologies/three) ([Markdown](https://aitinkerers.org/technologies/three.md)) — 13 public demos
- [timing](https://aitinkerers.org/technologies/timing) ([Markdown](https://aitinkerers.org/technologies/timing.md)) — 1 public demo
- [TypeScript](https://aitinkerers.org/technologies/typescript) ([Markdown](https://aitinkerers.org/technologies/typescript.md)) — 205 public demos
- [Video](https://aitinkerers.org/technologies/video) ([Markdown](https://aitinkerers.org/technologies/video.md)) — 2 public demos