diff --git a/playground/astro/astro.config.js b/playground/astro/astro.config.js
index 3b48877..3db05ec 100644
--- a/playground/astro/astro.config.js
+++ b/playground/astro/astro.config.js
@@ -17,7 +17,7 @@ export default defineConfig({
     plugins: [
       inspect(),
       whyframe({
-        defaultSrc: '/frames/basic',
+        defaultSrc: '/frames/default',
         components: [{ name: 'Story', showSource: true }]
       }),
       whyframeAstro({
diff --git a/playground/astro/package.json b/playground/astro/package.json
index 4f597b4..1c157bd 100644
--- a/playground/astro/package.json
+++ b/playground/astro/package.json
@@ -28,7 +28,6 @@
 		"@whyframe/svelte": "^0.1.5",
 		"@whyframe/vue": "^0.1.3",
 		"astro": "^1.6.3",
-		"preact-render-to-string": "^5.2.6",
 		"svelte": "^3.52.0",
 		"vite-plugin-inspect": "^0.7.7"
 	}
diff --git a/playground/astro/public/astro.svg b/playground/astro/public/astro.svg
new file mode 100644
index 0000000..d798789
--- /dev/null
+++ b/playground/astro/public/astro.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1281" height="1280" fill="none"><path fill="url(#a)" fill-rule="evenodd" d="M815.931 94.644c9.719 12.065 14.675 28.346 24.588 60.909l216.541 711.348c-80.061-41.533-167.096-71.488-258.886-87.649L657.182 302.798a18.35 18.35 0 0 0-35.21.055L482.688 779.011c-92.217 16.089-179.65 46.098-260.054 87.782L440.24 155.388c9.943-32.506 14.914-48.759 24.634-60.803A80.003 80.003 0 0 1 497.293 70.6c14.359-5.772 31.356-5.772 65.349-5.772h155.425c34.037 0 51.056 0 65.429 5.784a79.994 79.994 0 0 1 32.435 24.032Z" clip-rule="evenodd"/><path fill="#FF5D01" fill-rule="evenodd" d="M841.843 900.754c-35.697 30.525-106.948 51.343-189.021 51.343-100.733 0-185.163-31.36-207.566-73.536-8.009 24.171-9.806 51.835-9.806 69.507 0 0-5.277 86.772 55.078 147.132 0-31.34 25.406-56.74 56.745-56.74 53.716 0 53.656 46.86 53.607 84.88l-.003 3.39c0 57.71 35.27 107.18 85.431 128.04-7.492-15.41-11.695-32.72-11.695-51 0-55.04 32.313-75.54 69.867-99.36h.001c29.88-18.95 63.079-40 85.959-82.24 11.939-22.04 18.718-47.277 18.718-74.102 0-16.495-2.564-32.392-7.315-47.314Z" clip-rule="evenodd"/><path fill="url(#b)" fill-rule="evenodd" d="M841.843 900.754c-35.697 30.525-106.948 51.343-189.021 51.343-100.733 0-185.163-31.36-207.566-73.536-8.009 24.171-9.806 51.835-9.806 69.507 0 0-5.277 86.772 55.078 147.132 0-31.34 25.406-56.74 56.745-56.74 53.716 0 53.656 46.86 53.607 84.88l-.003 3.39c0 57.71 35.27 107.18 85.431 128.04-7.492-15.41-11.695-32.72-11.695-51 0-55.04 32.313-75.54 69.867-99.36h.001c29.88-18.95 63.079-40 85.959-82.24 11.939-22.04 18.718-47.277 18.718-74.102 0-16.495-2.564-32.392-7.315-47.314Z" clip-rule="evenodd"/><defs><linearGradient id="a" x1="883.889" x2="639.848" y1="27.113" y2="866.902" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#F9FAFB"/></linearGradient><linearGradient id="b" x1="1002.57" x2="791.219" y1="652.45" y2="1094.91" gradientUnits="userSpaceOnUse"><stop stop-color="#FF1639"/><stop offset="1" stop-color="#FF1639" stop-opacity="0"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/playground/astro/src/assets/whyframe.svg b/playground/astro/src/assets/whyframe.svg
new file mode 100644
index 0000000..f12447b
--- /dev/null
+++ b/playground/astro/src/assets/whyframe.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="161" height="146" fill="none"><rect width="99" height="99" x="62" fill="url(#a)" opacity=".3" rx="30"/><rect width="116" height="116" x="32" y="6" fill="url(#b)" opacity=".6" rx="30"/><rect width="134" height="134" y="12" fill="url(#c)" rx="30"/><defs><linearGradient id="a" x1="92.848" x2="129.497" y1="0" y2="98.35" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF023"/><stop offset=".604" stop-color="#FFB423"/><stop offset=".99" stop-color="#FFA723"/></linearGradient><linearGradient id="b" x1="68.145" x2="111.087" y1="6" y2="121.239" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF023"/><stop offset=".604" stop-color="#FFB423"/><stop offset=".99" stop-color="#FFA723"/></linearGradient><linearGradient id="c" x1="41.754" x2="91.359" y1="12" y2="145.121" gradientUnits="userSpaceOnUse"><stop stop-color="#FFF023"/><stop offset=".604" stop-color="#FFB423"/><stop offset=".99" stop-color="#FFA723"/></linearGradient></defs></svg>
\ No newline at end of file
diff --git a/playground/astro/src/components/Counter.module.css b/playground/astro/src/components/Counter.module.css
deleted file mode 100644
index 81333c3..0000000
--- a/playground/astro/src/components/Counter.module.css
+++ /dev/null
@@ -1,21 +0,0 @@
-.counter {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #f9f9f9;
-  cursor: pointer;
-  transition: background-color 0.2s, border-color 0.25s;
-}
-
-.counter:hover {
-  background-color: #ced1ff;
-  border-color: #646cff;
-}
-
-.counter:focus,
-.counter:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
diff --git a/playground/astro/src/components/Counter.svelte b/playground/astro/src/components/Counter.svelte
deleted file mode 100644
index d714e7e..0000000
--- a/playground/astro/src/components/Counter.svelte
+++ /dev/null
@@ -1,46 +0,0 @@
-<script>
-  import { createEventDispatcher } from 'svelte'
-
-  const dispatch = createEventDispatcher()
-
-  export let max = 0
-
-  let count = 0
-  const increment = () => {
-    if (max !== 0 && count >= max) {
-      dispatch('max')
-      document.body.style.backgroundColor = 'pink'
-      alert('🚨 YOU HAVE BEEN WARNED 🚨')
-      return
-    }
-    count += 1
-  }
-</script>
-
-<button on:click={increment}>
-  Count is {count} (svelte)
-</button>
-
-<style>
-  button {
-    border-radius: 8px;
-    border: 1px solid transparent;
-    padding: 0.6em 1.2em;
-    font-size: 1em;
-    font-weight: 500;
-    font-family: inherit;
-    background-color: #f9f9f9;
-    cursor: pointer;
-    transition: background-color 0.2s, border-color 0.25s;
-  }
-
-  button:hover {
-    background-color: #ced1ff;
-    border-color: #646cff;
-  }
-
-  button:focus,
-  button:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
-</style>
diff --git a/playground/astro/src/components/Counter.vue b/playground/astro/src/components/Counter.vue
deleted file mode 100644
index 5c65009..0000000
--- a/playground/astro/src/components/Counter.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<script setup>
-import { ref } from 'vue'
-
-const props = defineProps({
-  max: {
-    type: Number,
-    default: 0
-  }
-})
-const emit = defineEmits(['max'])
-
-const count = ref(0)
-
-const increment = () => {
-  if (props.max !== 0 && count.value >= props.max) {
-    emit('max')
-    document.body.style.backgroundColor = 'pink'
-    alert('🚨 YOU HAVE BEEN WARNED 🚨')
-    return
-  }
-  count.value++
-}
-</script>
-
-<template>
-  <button @click="increment">Count is {{ count }} (vue)</button>
-</template>
-
-<style scoped>
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #f9f9f9;
-  cursor: pointer;
-  transition: background-color 0.2s, border-color 0.25s;
-}
-
-button:hover {
-  background-color: #ced1ff;
-  border-color: #646cff;
-}
-
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-</style>
diff --git a/playground/astro/src/components/CounterPreact.jsx b/playground/astro/src/components/CounterPreact.jsx
deleted file mode 100644
index ae8ed44..0000000
--- a/playground/astro/src/components/CounterPreact.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @jsxImportSource preact */
-import { useState } from 'preact/hooks'
-import { counter } from './Counter.module.css'
-
-export function Counter({ max = 0, onMax }) {
-  const [count, setCount] = useState(0)
-
-  const increment = () => {
-    if (max !== 0 && count >= max) {
-      onMax?.()
-      document.body.style.backgroundColor = 'pink'
-      alert('🚨 YOU HAVE BEEN WARNED 🚨')
-      return
-    }
-    setCount(count + 1)
-  }
-
-  return (
-    <button className={counter} onClick={increment}>
-      Count is {count} (preact)
-    </button>
-  )
-}
diff --git a/playground/astro/src/components/CounterReact.jsx b/playground/astro/src/components/CounterReact.jsx
deleted file mode 100644
index 08d82ba..0000000
--- a/playground/astro/src/components/CounterReact.jsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @jsxImportSource react */
-import { useState } from 'react'
-import { counter } from './Counter.module.css'
-
-export function Counter({ max = 0, onMax }) {
-  const [count, setCount] = useState(0)
-
-  const increment = () => {
-    if (max !== 0 && count >= max) {
-      onMax?.()
-      document.body.style.backgroundColor = 'pink'
-      alert('🚨 YOU HAVE BEEN WARNED 🚨')
-      return
-    }
-    setCount(count + 1)
-  }
-
-  return (
-    <button className={counter} onClick={increment}>
-      Count is {count} (react)
-    </button>
-  )
-}
diff --git a/playground/astro/src/components/CounterSolid.jsx b/playground/astro/src/components/CounterSolid.jsx
deleted file mode 100644
index 34067d6..0000000
--- a/playground/astro/src/components/CounterSolid.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-/** @jsxImportSource solid-js */
-import { createSignal } from 'solid-js'
-import { counter } from './Counter.module.css'
-
-export function Counter(props) {
-  const [count, setCount] = createSignal(0)
-
-  const increment = () => {
-    const newCount = count() + 1
-    if (newCount > (props.max ?? Infinity)) {
-      props.onMax?.()
-      document.body.style.backgroundColor = 'pink'
-      alert('🚨 YOU HAVE BEEN WARNED 🚨')
-      return
-    }
-    setCount(newCount)
-  }
-
-  return (
-    <button class={counter} onClick={increment}>
-      Count is {count()} (solid)
-    </button>
-  )
-}
diff --git a/playground/astro/src/components/Popup.module.css b/playground/astro/src/components/Popup.module.css
new file mode 100644
index 0000000..cb3fce9
--- /dev/null
+++ b/playground/astro/src/components/Popup.module.css
@@ -0,0 +1,44 @@
+.activator {
+  display: block;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.5em 1em;
+  font-size: 0.9em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #efefef;
+  background-color: #1e1e1e;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+.activator:hover {
+  border-color: #ffed24;
+}
+
+.activator:focus,
+.activator:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background-color: #090909;
+  color: #efefef;
+  font-size: 1.5rem;
+  opacity: 0.8;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.background:focus,
+.background:focus-visible {
+  border: 4px solid #ffed24;
+}
diff --git a/playground/astro/src/components/Popup.svelte b/playground/astro/src/components/Popup.svelte
new file mode 100644
index 0000000..add1c49
--- /dev/null
+++ b/playground/astro/src/components/Popup.svelte
@@ -0,0 +1,67 @@
+<script>
+  /** @type {string} */
+  export let content
+
+  let open = false
+</script>
+
+<button
+  class="activator"
+  aria-haspopup="dialog"
+  on:click={() => (open = !open)}
+>
+  <slot />
+</button>
+
+{#if open}
+  <button class="background" on:click={() => (open = false)}>
+    <p>{content}</p>
+  </button>
+{/if}
+
+<style>
+  .activator {
+    display: block;
+    border-radius: 8px;
+    border: 1px solid transparent;
+    padding: 0.5em 1em;
+    font-size: 0.9em;
+    font-weight: 500;
+    font-family: inherit;
+    color: #efefef;
+    background-color: #1e1e1e;
+    cursor: pointer;
+    transition: border-color 0.25s;
+  }
+
+  .activator:hover {
+    border-color: #ffed24;
+  }
+
+  .activator:focus,
+  .activator:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+
+  .background {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    background-color: #090909;
+    color: #efefef;
+    font-size: 1.5rem;
+    opacity: 0.8;
+    z-index: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .background:focus,
+  .background:focus-visible {
+    border: 4px solid #ffed24;
+  }
+</style>
diff --git a/playground/astro/src/components/Popup.vue b/playground/astro/src/components/Popup.vue
new file mode 100644
index 0000000..7f21bb9
--- /dev/null
+++ b/playground/astro/src/components/Popup.vue
@@ -0,0 +1,69 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+  content: {
+    type: String,
+    required: true
+  }
+})
+
+const open = ref(false)
+</script>
+
+<template>
+  <button class="activator" aria-haspopup="dialog" @click="open = !open">
+    <slot />
+  </button>
+
+  <button v-show="open" class="background" @click="open = false">
+    <p>{{ content }}</p>
+  </button>
+</template>
+
+<style scoped>
+.activator {
+  display: block;
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.5em 1em;
+  font-size: 0.9em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #efefef;
+  background-color: #1e1e1e;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+.activator:hover {
+  border-color: #ffed24;
+}
+
+.activator:focus,
+.activator:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+.background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  background-color: #090909;
+  color: #efefef;
+  font-size: 1.5rem;
+  opacity: 0.8;
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.background:focus,
+.background:focus-visible {
+  border: 4px solid #ffed24;
+}
+</style>
diff --git a/playground/astro/src/components/PopupPreact.jsx b/playground/astro/src/components/PopupPreact.jsx
new file mode 100644
index 0000000..c7caee7
--- /dev/null
+++ b/playground/astro/src/components/PopupPreact.jsx
@@ -0,0 +1,27 @@
+import { useState } from 'preact/hooks'
+import style from './Popup.module.css'
+
+/**
+ * @param {{ content: string, children: any }} props
+ */
+export default function Popup({ content, children }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <button
+        class={style.activator}
+        aria-haspopup="dialog"
+        onClick={() => setOpen((v) => !v)}
+      >
+        {children}
+      </button>
+
+      {open && (
+        <button class={style.background} onClick={() => setOpen(false)}>
+          <p>{content}</p>
+        </button>
+      )}
+    </>
+  )
+}
diff --git a/playground/astro/src/components/PopupReact.jsx b/playground/astro/src/components/PopupReact.jsx
new file mode 100644
index 0000000..7c5865e
--- /dev/null
+++ b/playground/astro/src/components/PopupReact.jsx
@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import style from './Popup.module.css'
+
+/**
+ * @param {{ content: string, children: any }} props
+ */
+export default function Popup({ content, children }) {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <button
+        className={style.activator}
+        aria-haspopup="dialog"
+        onClick={() => setOpen((v) => !v)}
+      >
+        {children}
+      </button>
+
+      {open && (
+        <button className={style.background} onClick={() => setOpen(false)}>
+          <p>{content}</p>
+        </button>
+      )}
+    </>
+  )
+}
diff --git a/playground/astro/src/components/PopupSolid.jsx b/playground/astro/src/components/PopupSolid.jsx
new file mode 100644
index 0000000..cb4a217
--- /dev/null
+++ b/playground/astro/src/components/PopupSolid.jsx
@@ -0,0 +1,27 @@
+import { createSignal, Show } from 'solid-js'
+import style from './Popup.module.css'
+
+/**
+ * @param {{ content: string, children: any }} props
+ */
+export default function Popup(props) {
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <>
+      <button
+        class={style.activator}
+        aria-haspopup="dialog"
+        onClick={() => setOpen((v) => !v)}
+      >
+        {props.children}
+      </button>
+
+      <Show when={open()}>
+        <button class={style.background} onClick={() => setOpen(false)}>
+          <p>{props.content}</p>
+        </button>
+      </Show>
+    </>
+  )
+}
diff --git a/playground/astro/src/components/Story.astro b/playground/astro/src/components/Story.astro
deleted file mode 100644
index 525ee11..0000000
--- a/playground/astro/src/components/Story.astro
+++ /dev/null
@@ -1,9 +0,0 @@
-<div>
-  <p>
-    This is a story of {Astro.props.title}:
-  </p>
-
-  <iframe data-why title={Astro.props.title} src={Astro.props.src}>
-    <slot />
-  </iframe>
-</div>
diff --git a/playground/astro/src/components/Story.svelte b/playground/astro/src/components/Story.svelte
new file mode 100644
index 0000000..364fc9c
--- /dev/null
+++ b/playground/astro/src/components/Story.svelte
@@ -0,0 +1,103 @@
+<script>
+  import { getWhyframeSource } from '@whyframe/core/utils'
+
+  /** @type {string} */
+  export let title
+  export let src = '/frames/special.html'
+
+  /** @type {HTMLIFrameElement}*/
+  let iframe
+  $: source = iframe ? getWhyframeSource(iframe) : undefined
+
+  let showCode = false
+</script>
+
+<div class="story">
+  <div class="bar">
+    <h2>{title}</h2>
+    <button aria-pressed={showCode} on:click={() => (showCode = !showCode)}>
+      Show code
+    </button>
+  </div>
+
+  <div class="frame">
+    <iframe bind:this={iframe} data-why {title} {src}>
+      <slot />
+    </iframe>
+    {#if showCode}
+      <div class="code">
+        <pre>{source}</pre>
+      </div>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .story {
+    background-color: #303030;
+  }
+
+  .bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #444444;
+    border-top-left-radius: 0.3rem;
+    border-top-right-radius: 0.3rem;
+    opacity: 0.8;
+  }
+
+  h2 {
+    font-size: 1rem;
+    font-weight: 500;
+    margin: 0;
+    margin-left: 0.5rem;
+  }
+
+  button {
+    margin: 0;
+    padding: 0.3rem 0.5rem;
+    background-color: transparent;
+    color: #efefef;
+    font-size: 0.9rem;
+    border: 0;
+    cursor: pointer;
+    border-top-right-radius: 0.3rem;
+    transition: background-color 0.2s;
+  }
+
+  button:focus,
+  button:hover,
+  button[aria-pressed='true'] {
+    background-color: #efefef20;
+  }
+
+  .frame {
+    position: relative;
+    overflow: hidden;
+    border-bottom-left-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem;
+  }
+
+  iframe {
+    display: block;
+    margin: 0;
+    border: 0;
+    background-color: transparent;
+    border-radius: 0;
+    width: 100%;
+    height: 167px;
+  }
+
+  .code {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    padding: 0 0.5rem;
+    background-color: #1e1e1e;
+    overflow: auto;
+    text-align: left;
+  }
+</style>
diff --git a/playground/astro/src/layouts/Layout.astro b/playground/astro/src/layouts/Layout.astro
index 6364653..0fdae09 100644
--- a/playground/astro/src/layouts/Layout.astro
+++ b/playground/astro/src/layouts/Layout.astro
@@ -2,8 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>whyframe astro</title>
+    <title>Astro + Whyframe</title>
   </head>
 
   <body>
@@ -21,7 +22,8 @@
       html,
       body {
         font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-        background-color: #efefef;
+        background-color: #1e1e1e;
+        color: #efefef;
         width: 100%;
         height: 100%;
         padding: 0;
@@ -33,19 +35,14 @@
         text-align: center;
       }
 
-      iframe[data-why] {
+      iframe[data-why],
+      .story {
         display: inline-block;
-        border: none;
-        box-shadow: 2.7px 3.2px 3.6px rgba(0, 0, 0, 0.024),
-          7.5px 8.8px 10px rgba(0, 0, 0, 0.035),
-          18.1px 21.1px 24.1px rgba(0, 0, 0, 0.046),
-          60px 70px 80px rgba(0, 0, 0, 0.07);
-        border-radius: 0.4rem;
+        border: 3px solid #303030;
+        background-color: #a2a2a2;
+        border-radius: 0.5rem;
         width: 400px;
-        min-height: 200px;
-        max-height: 400px;
-        background-color: white;
-        margin: 0.5rem;
+        height: 200px;
       }
     </style>
   </body>
diff --git a/playground/astro/src/pages/frames/default.astro b/playground/astro/src/pages/frames/default.astro
new file mode 100644
index 0000000..98c9252
--- /dev/null
+++ b/playground/astro/src/pages/frames/default.astro
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Whyframe - Default</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      import { createApp } from 'whyframe:app'
+      createApp(document.getElementById('app'))
+    </script>
+  </body>
+</html>
diff --git a/playground/astro/src/pages/frames/basic/index.astro b/playground/astro/src/pages/frames/special.astro
similarity index 90%
rename from playground/astro/src/pages/frames/basic/index.astro
rename to playground/astro/src/pages/frames/special.astro
index 67e0ea9..53e2190 100644
--- a/playground/astro/src/pages/frames/basic/index.astro
+++ b/playground/astro/src/pages/frames/special.astro
@@ -3,15 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>whyframe</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script>
-      import { createApp } from 'whyframe:app'
-
-      createApp(document.getElementById('app'))
-    </script>
+    <title>Whyframe - Special</title>
     <style is:global>
       *,
       *::before,
@@ -20,27 +12,28 @@
       }
 
       html,
-      body,
-      #app {
+      body {
         font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
         width: 100%;
         height: 100%;
         padding: 0;
         margin: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        flex-direction: column;
       }
 
       body {
-        background-color: #efefef;
+        background-color: #2b2b2b;
         background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%239e9e9e' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
-      }
-
-      p {
-        font-weight: 500;
+        background-position: 2px 2px;
+        padding: 0.5rem;
+        color: #efefef;
       }
     </style>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script>
+      import { createApp } from 'whyframe:app'
+      createApp(document.getElementById('app'))
+    </script>
   </body>
 </html>
diff --git a/playground/astro/src/pages/index.astro b/playground/astro/src/pages/index.astro
index adc586c..657978e 100644
--- a/playground/astro/src/pages/index.astro
+++ b/playground/astro/src/pages/index.astro
@@ -1,65 +1,136 @@
 ---
+import whyframeLogo from '../assets/whyframe.svg'
 import Layout from '../layouts/Layout.astro'
-import Story from '../components/Story.astro'
-import CounterSvelte from '../components/Counter.svelte'
-import CounterVue from '../components/Counter.vue'
-import { Counter as CounterSolid } from '../components/CounterSolid.jsx'
-import { Counter as CounterPreact } from '../components/CounterPreact.jsx'
-import { Counter as CounterReact } from '../components/CounterReact.jsx'
-
-const max = 10
+import Story from '../components/Story.svelte'
+import PopupSvelte from '../components/Popup.svelte'
+import PopupVue from '../components/Popup.vue'
+import PopupSolid from '../components/PopupSolid.jsx'
+import PopupPreact from '../components/PopupPreact.jsx'
+import PopupReact from '../components/PopupReact.jsx'
 ---
 
-<Layout title="Astro">
-  <h1>Astro</h1>
+<Layout>
+  <div>
+    <a href="https://astro.build" target="_blank">
+      <img src="/astro.svg" class="logo astro" alt="astro" height="80" />
+    </a>
+    <a href="https://whyframe.dev" target="_blank">
+      <img
+        src={whyframeLogo}
+        class="logo whyframe"
+        alt="whyframe"
+        height="80"
+      />
+    </a>
+  </div>
+
+  <h1>Astro + Whyframe</h1>
+
+  <p class="docs">
+    Check out the examples below to see component isolation in action!
+    <br />
+    You can view the source code at <code>src/pages/index.astro</code>.
+    <br />
+    Click on the logos above to learn more.
+  </p>
 
   <h2>Svelte</h2>
-  <iframe data-why title="Hello">
-    <p>Click to increment!</p> <CounterSvelte />
-  </iframe>
-  <iframe data-why="svelte" title="World" src="/frames/basic">
-    <p>Do not go over {max}</p> <CounterSvelte {max} />
-  </iframe>
+  <div class="frames">
+    <iframe data-why title="Popup 1">
+      <p>Simple usage example</p> <PopupSvelte content="Hello world">Open
+      popup</PopupSvelte>
+    </iframe>
+
+    <Story client:load title="Popup 2">
+      <p>This is a Story component</p>
+      <PopupSvelte content="Hello world">Open popup</PopupSvelte>
+    </Story>
+  </div>
 
   <h2>Vue</h2>
-  <iframe data-why="vue" title="Hello">
-    <p>Click to increment!</p> <CounterVue />
-  </iframe>
-  <iframe data-why="vue" title="World" src="/frames/basic">
-    <p>Do not go over {{max}}</p> <CounterVue :max="max" />
-  </iframe>
+  <div class="frames">
+    <iframe data-why="vue" title="Popup 1">
+      <p>Simple usage example</p> <PopupVue content="Hello world">Open
+      popup</PopupVue>
+    </iframe>
+
+    <Story client:load why="vue" title="Popup 2">
+      <p>This is a Story component</p>
+      <PopupVue content="Hello world">Open popup</PopupVue>
+    </Story>
+  </div>
 
   <h2>Solid</h2>
-  <iframe data-why="solid" title="Hello">
-    <p>Click to increment!</p> <CounterSolid />
-  </iframe>
-  <iframe data-why="solid" title="World" src="/frames/basic">
-    <p>Do not go over {max}</p> <CounterSolid max={max} />
-  </iframe>
+  <div class="frames">
+    <iframe data-why="solid" title="Popup 1">
+      <p>Simple usage example</p> <PopupSolid content="Hello world">Open
+      popup</PopupSolid>
+    </iframe>
+
+    <Story client:load why="solid" title="Popup 2">
+      <p>This is a Story component</p>
+      <PopupSolid content="Hello world">Open popup</PopupSolid>
+    </Story>
+  </div>
 
   <h2>Preact</h2>
-  <iframe data-why="preact" title="Hello">
-    <p>Click to increment!</p> <CounterPreact />
-  </iframe>
-  <iframe data-why="preact" title="World" src="/frames/basic">
-    <p>Do not go over {max}</p> <CounterPreact max={max} />
-  </iframe>
+  <div class="frames">
+    <iframe data-why="preact" title="Popup 1">
+      <p>Simple usage example</p> <PopupPreact content="Hello world">Open
+      popup</PopupPreact>
+    </iframe>
+
+    <Story client:load why="preact" title="Popup 2">
+      <p>This is a Story component</p>
+      <PopupPreact content="Hello world">Open popup</PopupPreact>
+    </Story>
+  </div>
 
   <h2>React</h2>
-  <iframe data-why="react" title="Hello">
-    <p>Click to increment!</p> <CounterReact />
-  </iframe>
-  <iframe data-why="react" title="World" src="/frames/basic">
-    <p>Do not go over {max}</p> <CounterReact max={max} />
-  </iframe>
-
-  <Story title="Hello">
-    <p>Click to increment!</p>
-    <CounterSvelte />
-  </Story>
-
-  <Story title="World" src="/frames/basic">
-    <p>Do not go over {max}</p>
-    <CounterSvelte {max} />
-  </Story>
+  <div class="frames">
+    <iframe data-why="react" title="Popup 1">
+      <p>Simple usage example</p> <PopupReact content="Hello world">Open
+      popup</PopupReact>
+    </iframe>
+
+    <Story client:load why="react" title="Popup 2">
+      <p>This is a Story component</p>
+      <PopupReact content="Hello world">Open popup</PopupReact>
+    </Story>
+  </div>
+
+  <style>
+    .logo {
+      margin: 1.5rem;
+      will-change: filter;
+      transition: filter 0.15s ease-out;
+    }
+    .logo.vite:hover {
+      filter: drop-shadow(0 0 2rem #646cffaa);
+    }
+    .logo.svelte:hover {
+      filter: drop-shadow(0 0 2rem #ff3e00aa);
+    }
+    .logo.whyframe:hover {
+      filter: drop-shadow(0 0 2rem #ffed24aa);
+    }
+
+    .docs {
+      line-height: 2;
+      opacity: 0.7;
+    }
+
+    h2 {
+      margin-top: 2rem;
+    }
+
+    .frames {
+      max-width: 900px;
+      margin: 1rem auto;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 1rem;
+    }
+  </style>
 </Layout>
diff --git a/playground/vite-preact/src/components/Popup.jsx b/playground/vite-preact/src/components/Popup.jsx
index 15eff71..c7caee7 100644
--- a/playground/vite-preact/src/components/Popup.jsx
+++ b/playground/vite-preact/src/components/Popup.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState } from 'preact/hooks'
 import style from './Popup.module.css'
 
 /**
diff --git a/tests/playground-astro/playground-astro.spec.js b/tests/playground-astro/playground-astro.spec.js
index 7844ecb..33b3d9b 100644
--- a/tests/playground-astro/playground-astro.spec.js
+++ b/tests/playground-astro/playground-astro.spec.js
@@ -5,5 +5,5 @@ setup()
 
 test('render the page', async ({ page }) => {
   await page.goto('/')
-  expect(await page.locator('h1').textContent()).toBe('Astro')
+  expect(await page.locator('h1').textContent()).toBe('Astro + Whyframe')
 })