diff --git a/demo/distance-perf.html b/demo/[tests] distance-field.html
similarity index 100%
rename from demo/distance-perf.html
rename to demo/[tests] distance-field.html
diff --git a/demo/perf.html b/demo/[tests] many-shapes.html
similarity index 100%
rename from demo/perf.html
rename to demo/[tests] many-shapes.html
diff --git a/demo/index.html b/demo/index.html
index 00bbbaf..fdfc08a 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -29,12 +29,20 @@
       h1 {
         color: #2c3e50;
         margin: 0;
+        margin-bottom: 1em;
+      }
+
+      h2 {
+        color: #2c3e50;
+        font-size: 1.2em;
+        margin: 1em 0 0;
       }
 
       ul {
         list-style-type: none;
         line-height: 1.8;
-        padding-left: 0em;
+        padding-left: 0;
+        margin: 0;
       }
 
       li::before {
diff --git a/src/folk-shape.ts b/src/folk-shape.ts
index 6e3f010..f9b4919 100644
--- a/src/folk-shape.ts
+++ b/src/folk-shape.ts
@@ -1,5 +1,5 @@
 import { css, html } from './common/tags';
-import { ResizeObserverManager } from './resize-observer';
+import { ResizeObserverManager } from './common/resize-observer';
 
 const resizeObserver = new ResizeObserverManager();
 
diff --git a/vite.config.ts b/vite.config.ts
index 716eb63..548bc7d 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,7 +4,7 @@ import { defineConfig, IndexHtmlTransformContext, Plugin } from 'vite';
 
 const demoDir = resolve(__dirname, 'demo');
 
-const files: string[] = readdirSync(demoDir).filter((file) => file.endsWith('.html'));
+const files: string[] = readdirSync(demoDir).filter((file) => file.endsWith('.html') && !file.startsWith('_'));
 const input: Record<string, string> = files.reduce((acc, file) => {
   acc[file.replace('.html', '')] = resolve(demoDir, file);
   return acc;
@@ -16,8 +16,22 @@ const linkGenerator = (): Plugin => {
     transformIndexHtml(html: string, ctx: IndexHtmlTransformContext) {
       if (!ctx.filename.endsWith('index.html')) return;
 
-      const links = files
-        .filter((file) => !file.includes('index') && !file.startsWith('_'))
+      // First, handle ungrouped files
+      const ungroupedFiles = files.filter((file) => !file.includes('index') && !file.match(/^\[([^\]]+)\]/));
+
+      // Then handle grouped files
+      const groups = files
+        .filter((file) => !file.includes('index') && file.match(/^\[([^\]]+)\]/))
+        .reduce((acc, file) => {
+          const match = file.match(/^\[([^\]]+)\](.+)\.html$/);
+          const group = match![1];
+          if (!acc[group]) acc[group] = [];
+          acc[group].push(file);
+          return acc;
+        }, {} as Record<string, string[]>);
+
+      // Generate ungrouped HTML first
+      const ungroupedHtml = ungroupedFiles
         .sort()
         .map((file) => {
           const title = file.replace('.html', '').replaceAll('-', ' ');
@@ -25,7 +39,26 @@ const linkGenerator = (): Plugin => {
         })
         .join('\n');
 
-      return html.replace('{{ LINKS }}', links);
+      // Then generate grouped HTML
+      const groupedHtml = Object.entries(groups)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([group, groupFiles]) => {
+          const groupHtml = groupFiles
+            .sort()
+            .map((file) => {
+              const title = file
+                .replace(/^\[[^\]]+\]/, '')
+                .replace('.html', '')
+                .replaceAll('-', ' ');
+              return `<li><a href="${file}">${title}</a></li>`;
+            })
+            .join('\n');
+
+          return `<h2>${group.replaceAll('-', ' ')}</h2>\n<ul>${groupHtml}</ul>`;
+        })
+        .join('\n');
+
+      return html.replace('{{ LINKS }}', `${ungroupedHtml}\n${groupedHtml}`);
     },
   };
 };