diff --git a/desc/entries/exex/index.html b/desc/entries/exex/index.html
new file mode 100644
index 0000000..465fc95
--- /dev/null
+++ b/desc/entries/exex/index.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Exex</title>
+    <link rel="stylesheet" href="/style.css">
+    <style>
+        
+
+    #container {
+        display: flex;
+    }
+
+    .child {
+        display: flex;
+        flex-direction: column;
+        padding: 4px;
+        margin: 4px;
+        border: 1px solid currentColor;
+        white-space: pre-wrap;
+        flex: 1;
+        flex-basis: 40ch;
+        
+        max-height: calc(1.6 * 2em + 16px);
+        overflow: hidden;
+        transition: max-height 0.3s ease-out;
+
+    }
+
+    .child:hover{
+        transition: max-height 0.6s ease-in;
+        max-height: 1000px;
+
+    }
+    
+
+
+    </style>
+</head>
+<body>
+
+
+    <h1>EXEX</h1>
+    <div class="subtitle">collaborative writing for branching documentation</div>
+
+    <div class="meta">
+    <div class="tags">
+        <span class="tag">collaborative</span>
+        <span class="tag">writing</span>
+        <span class="tag">tool</span>
+    </div>
+
+        <ul class="links">
+            <li><a href="https://git.xpub.nl/kamo/exex">git</a></li>
+            <li><a href="https://constantvzw.org/wefts/cc4r.en.html">CC4r license</a></li>
+            <li><a href="https://hub.xpub.nl/soupboat/exex/">try it</a></li>
+        </ul>
+    </div>
+
+    
+    <!-- <section> -->
+    <!-- Every entry comes with: --> 
+    <!-- some context -->
+    <!-- some reflections -->
+    <!-- some examples -->
+    <!-- </section> -->
+
+
+    <section class="context">
+        <h2>Context</h2>
+        <p>
+        A branching version of the <a href="https://en.wikipedia.org/wiki/Exquisite_corpse">exquisite corpse game</a>, forked from the <a href="https://git.xpub.nl/kamo/exquisite-branch">exquisite branch</a> drawing app developed for <a href="https://issue.xpub.nl/17/">SI17</a>.
+        </p>
+        <p>
+        Write something, upload it and send the link to someone else: they will continue from your excerpt. With a catch: if you send to just one person the chain will continue linearly, but send it to more people and things will start branching in different directions.
+        </p>
+
+        <p>
+        Could be a writing machine to work on the collective pubblication for the graduation, inspired by what <a href="https://pad.xpub.nl/p/gradcollectivexpub">Kim wrote here</a>
+        </p>
+    </section>
+
+    <section>
+        <h2>reflections</h2>
+
+        
+
+
+    </section>
+
+    <section>
+        <h2>examples</h2>
+    </section>
+
+
+
+    <section id='container'></section>
+
+
+
+
+    <script>
+
+    const display = (container, tree) => {
+        if(tree.branches){
+            let content = document.createElement('div')
+            content.classList.add('child')
+            if (tree.content) {
+            content.innerHTML = tree.content
+            }
+            container.appendChild(content)
+        for (const b of tree.branches) {
+                display(content, b)
+            }
+        }
+    }
+
+    const constainer = document.querySelector('#container')
+
+    fetch('https://hub.xpub.nl/soupboat/exex/api/v1/tree/about/')
+        .then(res=>res.json())
+        .then(res=>{
+            display(container, res)
+    })
+
+
+
+    </script>
+
+
+</body>
+</html>
diff --git a/desc/index.html b/desc/index.html
index 987c917..6565190 100644
--- a/desc/index.html
+++ b/desc/index.html
@@ -3,80 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <title>A toolkit,,, erg</title>
-
-    <style>
-
-    body {
-        margin: 32px;
-        font-family: sans-serif;
-        line-height: 1.6;
-        color: dodgerblue;
-    }
-
-    pre,
-    section {
-        font-family: sans-serif;
-        font-size: 1rem;
-        line-height: 1.6;
-        padding: 1em;
-        border: 1px dashed currentColor;
-        max-width: 80ch;
-        margin-block: 1em;
-    }
-
-    table {
-        border-collapse: collapse;
-    } 
-
-    thead {
-        font-weight: bold;
-    }
-
-    td {
-        border: 1px solid currentColor;
-        padding: 1em;
-    }
-    
-    td.title {
-        font-style: italic;
-
-    }
-
-    .tag {
-        display: inline-block;
-        background-color: dodgerblue;
-        color: white;
-        border-radius: 1em;
-        padding: 2px 8px;
-    }
-
-    .tag + .tag {
-        margin-left: 8px;
-    }
-  
-  
-    .controller {
-        margin-block: 32px;
-
-    }
-
-    span {
-        transition: transform 5s ease-in 5s;
-        transform: translate(0,0);
-        display: inline-block;
-    }
-
-    span:hover {
-        transform: translate(0, -10px)!important;
-        transition: transform 0.2s;
-        cursor: zoom-in;
-    }
-
-    </style>
-
+    <link rel="stylesheet" href="style.css">
+</head>
 
 
-</head>
 
 <body>
     
@@ -181,7 +111,9 @@ const wobble = () => {
             // replace space with &nbsp; character, otherwise empty span = width 0
             c = c == ' ' ? '&nbsp;' : c
             // wobble with centered random function
-            return `<span style="transform: translate(${r(1)}px, ${r(2)}px)">${c}</span>`
+
+            return `<span style="transform: scale(${r(0.3)+1})">${c}</span>`
+            // return `<span style="transform: translate(${r(1)}px, ${r(2)}px)">${c}</span>`
         }).join('')
         e.style.transform = `translate(${r(10)}px, ${r(10)}px)`
         console.log(r())
diff --git a/desc/style.css b/desc/style.css
new file mode 100644
index 0000000..3aec00a
--- /dev/null
+++ b/desc/style.css
@@ -0,0 +1,106 @@
+
+    body {
+        margin: 32px;
+        font-family: sans-serif;
+        line-height: 1.6;
+        color: dodgerblue;
+    }
+
+    pre,
+    section {
+        font-family: sans-serif;
+        font-size: 1rem;
+        line-height: 1.6;
+        padding: 1em;
+        border: 1px dashed currentColor;
+        max-width: 80ch;
+        margin-block: 1em;
+    }
+
+    table {
+        border-collapse: collapse;
+    } 
+
+    thead {
+        font-weight: bold;
+    }
+
+    tr {
+        border: 1px solid currentColor;
+
+    }
+
+    td {
+        border: 1px solid currentColor;
+        padding: 1em;
+    }
+    
+    td.title {
+        font-style: italic;
+
+    }
+
+    td.tags {
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 8px;
+        border: none;
+    }
+
+    .tag {
+        display: inline-block;
+        background-color: dodgerblue;
+        color: white;
+        border-radius: 1em;
+        padding: 2px 8px;
+    }
+
+  
+    .controller {
+        margin-block: 32px;
+
+    }
+
+    span:not(.tag) {
+        transition: transform 5s ease-in 5s, margin 5s ease-in 5s;
+        transform: scale(1);
+        display: inline-block;
+        margin: 0;
+        
+    }
+
+    span:hover:not(.tag) {
+        transform: scale(2)!important;
+        transition: transform 0.2s, margin 0.2s;
+        cursor: zoom-in;
+        margin: 4px;
+    }
+
+    h1 {
+    margin-bottom: 0;
+    font-size: 46px;
+    }
+
+    h2 {
+    margin-block: 0;
+    }
+  
+
+    .meta {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    }
+
+    .links {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    gap: 8px;
+    }
+
+    a {
+        color: currentColor;
+        font-weight: bold;
+    }
