diff --git a/demo/space-morph.html b/demo/space-morph.html
new file mode 100644
index 0000000..1a5b3b5
--- /dev/null
+++ b/demo/space-morph.html
@@ -0,0 +1,60 @@
+
+
+
+
+ Folk Space Demo
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/folk-space.ts b/src/folk-space.ts
new file mode 100644
index 0000000..3d399dc
--- /dev/null
+++ b/src/folk-space.ts
@@ -0,0 +1,72 @@
+import { html } from './common/tags';
+
+declare global {
+ interface HTMLElementTagNameMap {
+ 'folk-space': FolkSpace;
+ }
+}
+
+export class FolkSpace extends HTMLElement {
+ static tagName = 'folk-space';
+
+ static define() {
+ customElements.define(this.tagName, this);
+ }
+
+ constructor() {
+ super();
+ const shadowRoot = this.attachShadow({ mode: 'open' });
+ shadowRoot.innerHTML = html`
+
+
+ `;
+ }
+
+ transition() {
+ const space = this.shadowRoot?.querySelector('.space');
+ space?.classList.toggle('rotate');
+ }
+}