diff --git a/desc/entries.json b/desc/entries.json
new file mode 100644
index 0000000..6f04f1b
--- /dev/null
+++ b/desc/entries.json
@@ -0,0 +1,22 @@
+{
+    "entries": [
+        {
+            "title": "exex",
+            "description": "collaborative writing for branching documentation",
+            "tags": "tool, writing, collaborative",
+            "gradient": "tool tool tool tool practice practice"
+        },
+        {
+            "title": "pair documenting",
+            "description": "like pair programming, but for documentation",
+            "tags": "practice, writing, collaborative",
+            "gradient": "practice practice practice"
+        },
+        {
+            "title": "1dl",
+            "description": "1dimension ~ flat markup language ",
+            "tags": "tool, markup, writing",
+            "gradient": "tool tool tool practice practice" 
+        }
+    ]
+}
diff --git a/desc/index.html b/desc/index.html
new file mode 100644
index 0000000..dbf90fa
--- /dev/null
+++ b/desc/index.html
@@ -0,0 +1,225 @@
+<!DOCTYPE html>
+<html lang="en">
+<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 {
+        font-family: sans-serif;
+        font-size: 1rem;
+        line-height: 1.6;
+        padding: 1em;
+        border: 1px dashed currentColor;
+        display: inline-block;
+    }
+
+    table {
+        border-collapse: collapse;
+    }
+
+    thead {
+        font-weight: bold;
+    }
+
+    td {
+        border: 1px solid currentColor;
+        padding: 1em;
+    }
+
+    .tag {
+        display: inline-block;
+        background-color: dodgerblue;
+        color: white;
+        border-radius: 1em;
+        padding: 2px 8px;
+    }
+
+    .tag + .tag {
+        margin-left: 8px;
+    }
+   
+    canvas {
+        display: block;
+    }
+
+    </style>
+
+
+
+</head>
+
+<body>
+    
+<pre>
+A toolkit ---------- set of practices
+what's the name for a set of practices?
+
+
+btw 
+
+toolkit: collection of tools
+set of practices: collection of practices
+
+some people could be more at ease using instruments
+some others more with developing habits and practical workflows
+
+workflow is a nice word
+</pre>
+
+
+
+<div class="controller">
+    <span>tools</span>
+    <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
+    <span>pratices</span>
+</div>
+
+<canvas id="gradient"></canvas>
+
+<table>
+    <thead>
+        <tr>
+            <td class="title">Title</td>
+            <td class="description">Description</td>
+            <td class="tags">Tags</td>
+        </tr>
+    </thead>
+    <tbody>
+    </tbody>
+</table>
+
+
+<pre>
+mh trying to sort out a gradient way to filter the writing machines
+using yet another writing machine such as a gradient
+that seems more expressive than a percentage system, 
+
+the very same amount
+    (
+    tool: 60%
+    practice: 40%
+    )
+
+it can be written in a gradient form as 
+    (
+    tool tool tool practice practice
+    )
+
+but also
+    (
+    tool practice tool practice tool
+    )
+
+in a way that adds more qualities to the quantity
+in a similar way, just adding another feature
+is as easy as adding it to the gradient
+    (
+    tool tool tool practice practice platform
+    )
+while in a percentage system adding                 hooowwww where are yanother dimension
+would mean to revisit all the previous property to sum up to 100 
+</pre>
+
+<pre>
+    but maybe the point is not to filter things ?
+    could anyway be something interesting to develop:
+    1 find components
+    2 place them spatially
+        2pi / components.lenght = angle for each component
+        how to place components?
+        could it be a mix between
+
+            a. chronologic order
+                cycle through components
+                insert every new component in a new angle position
+            
+            b. positional order
+                ??? 
+                cycle again through components
+                get first and last distincts of list
+                grade them
+                aaa ok too difficult for now
+                actually maybe this is multi d vector math 
+                and i dont have the minimal clue about it
+                ahah
+</pre>
+
+<script>
+
+    const populateTable = (entries) => {
+        
+        const rows = []
+
+        for (const entry of entries) {
+        const row = document.createElement('tr')
+
+        const title = document.createElement('td')
+        title.classList.add('title')
+        title.innerHTML = entry.title
+
+        const description = document.createElement('td')
+        description.classList.add('description')
+        description.innerHTML = entry.description
+
+        const tags = document.createElement('td')
+        tags.classList.add('tags')
+        entry.tags.split(',').sort().forEach(tag=>{
+                const chips = document.createElement('span')
+                chips.classList.add('tag')
+                chips.innerHTML = tag.trim()
+                tags.appendChild(chips)
+            })
+
+
+        row.appendChild(title)
+        row.appendChild(description)
+        row.appendChild(tags)
+
+        rows.push(row)
+        }
+    return rows
+    }
+
+
+    const handleGradient = (entries) => { 
+        const canvas = document.querySelector('#gradient')
+        const ctx = canvas.getContext("2d");
+        ctx.font = "1rem serif";
+         
+
+        for (const entry of entries) {
+            let components = {}
+            entry.gradient.split(' ').map(component=>{
+                let value = (components[component] || 0) + 1
+                components[component] = value
+            })
+            console.log(components)
+            const c = Object.keys(components).length
+            console.log(c)
+        }
+    }
+
+
+
+
+    fetch('entries.json').then(res=>res.json()).then(res=> {
+        const table = document.querySelector('table tbody')
+        table.append(...populateTable(res.entries))
+        handleGradient(res.entries)
+        })
+
+
+
+</script>
+
+</body>
+</html>
