edit: insta cutter maintenant ajusté à tous les trucs de merde d'insta x333

edit: description vide et parsing du texte
edit: donations + modif gestion post non-formaté
2026-05-06 06:09:38 +02:00 · 2026-04-26 18:39:14 +02:00 · 2026-04-26 16:47:34 +02:00 · 2026-04-22 01:22:33 +02:00 · 2026-04-21 21:10:25 +02:00 · 2026-04-21 21:08:28 +02:00
40 changed files with 1666 additions and 482 deletions
@@ -0,0 +1,112 @@
+/*=============Typo*/
+@font-face {
+  font-family: 'lineal';
+  src: url('../typo/Lineal-Heavy.ttf');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('../typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('../typo/Velvelyne-Light.ttf') format('truetype');
+  font-weight:lighter;
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*============General*/
+
+body, html {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+  min-width: 100vw;
+  min-height: 100vh;
+  overflow: auto;
+}
+
+:root {
+    --back-color: black;
+    --main-color: white;
+    --accent-color: #3CFF00;
+    --neon-color: #3CFF00;
+
+    color: var(--main-color);
+    font-size: 1rem;
+    background: var(--back-color);
+    font-family: 'velvelyne', sans-serif;
+    font-weight: bold;
+}
+
+body > *{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+/*===================Animation*/
+@keyframes blink {
+  0%   { color: var(--accent-color);}
+  15%  { color: var(--main-color);}
+  35%  { color: var(--main-color);}
+  50%  { color: var(--accent-color);}
+  65%  { color: var(--main-color);}
+  85%  { color: var(--main-color);}
+  100%  { color: var(--accent-color);}
+}
+
+/*===================Layout*/
+#welcome-panel {
+  text-align: center;
+}
+
+#welcome-panel strong{
+  font-family:'lineal';
+  font-weight: normal;
+  font-size: 22.2px;
+}
+
+h1 {
+    font-family: 'lineal', sans-serif;
+    font-weight: bolder;
+}
+
+h2{
+  font-family: 'pressStart2P';
+  font-size: 13.12px;
+  font-weight: normal;
+  animation: blink 1.61s infinite;
+}
+
+#ui-canvas {
+  display: block;
+  height: 1350px;
+  width: 1080px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+canvas{
+  max-width: 100%;
+}
+
+#cutter-panel{
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 3.33px;
+  margin-top: 13.12px;
+}
+
+#download{
+  margin: 7.77px;
+}
@@ -0,0 +1,47 @@
+const FORM = document.getElementById("cutter-form")
+const BUTTON = document.getElementById("download")
+const IMAGE = new Image()
+let rowCount
+let maxCount
+
+FORM.addEventListener("submit", e => {
+        e.preventDefault()
+        const data = new FormData(FORM)
+        IMAGE.src = URL.createObjectURL(data.get('image'))
+        rowCount = data.get('rows')
+        console.log('ça marche :', data)
+    })
+
+IMAGE.addEventListener('load', e => {
+    document.getElementById('cutter-panel').replaceChildren()
+    for(let i = 0; i<rowCount; i++){
+        for (let j = 0; j<3; j++){
+            let e = document.createElement('canvas')
+            e.width = 1080
+            e.height = 1350
+            let context = e.getContext('2d')
+            context.fillStyle = 'black'
+            context.drawImage(IMAGE,
+                j*(1080*0.94), i*1350,
+                1080*0.94, 1350,
+                1080*0.03, 0,
+                1080*0.94, 1350
+            )
+            document.getElementById('cutter-panel').append(e)
+        }
+    }
+})
+
+BUTTON.addEventListener('click', e => {
+    let imgList = document.querySelectorAll('canvas')
+    maxCount = imgList.length
+    for (let [i, img] of imgList.entries()){
+        img.toBlob(b => {
+            let aEl = document.createElement('a')
+            let index = maxCount - i
+            aEl.href = URL.createObjectURL(b)
+            aEl.download = 'img-' + index + '.jpg'
+            aEl.click()
+        },'image/jpeg',1)
+    }
+})
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="cutter.css">
+    <title>Insta Ninja</title>
+</head>
+<body>
+    <form id="cutter-form">
+        <div id="welcome-panel">
+            <h1>Insta Ninja</h1>
+            <h2>Séléctionne un photo pour la découper<br>en une grille au format du feed insta<br></h2>
+            <p><strong>Attention :</strong> pour un permettre le bon affichage de la miniature sur le feed,<br>
+              il faut que <strong>la largeur de l'image d'entrée soit de 3 x (1080 x 0.94) = 3045 px</strong><br><br>
+              Pour la hauteur, il suffit de multiplier 1350 par le nombre de ligne voulu<br><br>
+              Ex : pour 6 post, soit <strong>2 lignes sur les 3 colonnes</strong> qui sont imposées par insta<br>
+              il faut que le format de l'image que tu crée soit <strong>3045 px de large par 2700 px de haut</strong></p>
+                <input type="number" name="rows" value="2" min="1">
+            <input type="file" name="image" accept="image/jpg,image/jpeg,image/png,image/webp" required/>
+            <button>Cut !</button>
+        </div>
+        <div id="cutter-panel">
+        </div>
+        <button id="download">Télécharger !</button>
+    </form>
+
+    <script type="module" src="cutter.js"></script>
+</body>
+</html>
@@ -0,0 +1,72 @@
+/*=============Typo*/
+@font-face {
+  font-family: 'lineal';
+  src: url('../typo/Lineal-Heavy.ttf');
+}
+
+@font-face {
+  font-family: 'pressStart2P';
+  src: url('../typo/PressStart2P-Regular.ttf');
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src: url('../typo/Velvelyne-Light.ttf') format('truetype');
+  font-weight:lighter;
+}
+
+@font-face {
+  font-family: 'velvelyne';
+  src:url('../typo/Velvelyne-Bold.ttf') format('truetype');
+  font-weight: bold;
+}
+
+/*============General*/
+
+body, html {
+    padding: 0;
+    margin: 0;
+}
+
+body {
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+:root {
+    --back-color: black;
+    --main-color: white;
+    --accent-color: #3CFF00;
+    --neon-color: #3CFF00;
+
+    color: var(--main-color);
+    font-size: 1rem;
+    background: var(--back-color);
+    font-family: 'velvelyne', sans-serif;
+    font-weight: bold;
+}
+
+body > *{
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: 15px;
+}
+
+#welcome-panel {
+  text-align: center;
+}
+
+h1 {
+    font-family: 'lineal', sans-serif;
+    font-weight: bolder;
+}
+
+#ui-canvas {
+  display: block;
+  max-width: calc(100vw - 30px);
+  max-height: calc(100vh - 30px);
+  margin-left: auto;
+  margin-right: auto;
+}
@@ -0,0 +1,112 @@
+import { Glitcher } from "./lib/glitcher";
+
+const CANVAS = document.getElementById("ui-canvas")
+const UI_GLITCHER = new Glitcher(CANVAS)
+const FORM = document.getElementById("glitcher-form")
+
+async function updateFromForm(){
+    let data = new FormData(FORM)
+    
+    let image = data.get("image")
+    if(image.size > 0){
+        if(UI_GLITCHER.currentImageFile != image){
+            await UI_GLITCHER.setImage(image)
+            UI_GLITCHER.clearGlitch()
+        }
+    } else {
+        UI_GLITCHER.clearImage()
+    }
+
+    document.getElementById("welcome-panel").hidden = image.size > 0
+    document.getElementById("glitch-panel").hidden = image.size == 0
+    
+    UI_GLITCHER.render()
+}
+
+for(let el of FORM.elements){
+    el.addEventListener("change", () => FORM.requestSubmit())
+}
+
+FORM.addEventListener("submit", e => {
+        e.preventDefault()
+        updateFromForm()
+    })
+
+FORM.addEventListener("reset", e => {
+        FORM.elements["image"].value = ""
+        updateFromForm()
+    })
+
+document.getElementById("download-btn").addEventListener("click", async e => {
+    e.preventDefault();
+    let data = await UI_GLITCHER.toBlob("image/jpeg", 0.9);
+    let a = document.createElement('a')
+    a.href = URL.createObjectURL(data)
+    a.download = UI_GLITCHER.currentImageFile.name
+    a.click()
+    setTimeout(() => URL.revokeObjectURL(a.href), 10000)
+})
+
+CANVAS.addEventListener("pointerdown", e => {
+    let pointerId = e.pointerId;
+
+    let lastX = undefined;
+    let lastY = undefined;
+    let lastCommit = null;
+
+    function applyGlitch(e){
+        if(e.pointerId != pointerId){
+            return
+        }
+
+        let canvasRect = CANVAS.getBoundingClientRect()
+        let x = e.clientX - canvasRect.left
+        let y = e.clientY - canvasRect.top
+
+        let now = Date.now()
+
+        if(lastCommit === null || now - lastCommit > 100){
+            let width = 50;
+            if(e.pointerType == "touch"){
+                width *= 2
+            }
+            
+            let deltaX = lastX !== undefined ? x - lastX : 0
+            let deltaY = lastY !== undefined ? y - lastY : 0
+
+            width += Math.max(Math.abs(deltaX), Math.abs(deltaY))
+            width += Math.random()*2
+
+            UI_GLITCHER.addGlitch(x, y, width)
+            UI_GLITCHER.render()
+
+            lastCommit = now
+        }
+
+        lastX = x
+        lastY = y
+    }
+
+    function endGlitch(e){
+        if(e.pointerId != pointerId){
+            return
+        }
+
+        window.removeEventListener("pointermove", applyGlitch)
+        window.removeEventListener("pointerup", endGlitch)
+    }
+
+    window.addEventListener("pointerup", endGlitch)
+    window.addEventListener("pointermove", applyGlitch)
+
+    applyGlitch(e)
+})
+
+/*function startRendering(){
+    UI_GLITCHER.render()
+    requestAnimationFrame(startRendering)
+}
+startRendering()*/
+
+setInterval(() => UI_GLITCHER.render(), 500)
+updateFromForm()
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="glitcher.css">
+    <title>Drags&Nerds Glitcher</title>
+</head>
+<body>
+
+    <form id="glitcher-form">
+        <div id="welcome-panel">
+            <h1>Glitcher</h1>
+            <p>Séléctionne un photo pour la glitcher</p>
+
+            <input type="file" name="image" accept="image/jpg, image/jpeg,image/png,image/webp" />
+        </div>
+        <div id="glitch-panel" hidden>
+            <canvas id="ui-canvas"></canvas>
+            <nav>
+                <button type="reset">Reset</button>
+                <button type="button" id="download-btn">Télécharger</button>
+            </nav>
+        </div>
+    </form>
+
+    <script type="module" src="glitcher.js"></script>
+</body>
+</html>
@@ -0,0 +1,7 @@
+varying highp vec2 vTextureCoord;
+uniform sampler2D uImageSampler;
+uniform highp vec2 uWindowSize;
+
+void main() {
+    gl_FragColor = texture2D(uImageSampler, vTextureCoord);
+}
@@ -0,0 +1,9 @@
+attribute vec2 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+varying highp vec2 vTextureCoord;
+
+void main() {
+    gl_Position = vec4(aVertexPosition, 0.0, 1.0);
+    vTextureCoord = aTextureCoord;
+}
@@ -0,0 +1,10 @@
+uniform highp vec2 uWindowSize;
+uniform sampler2D uVideoSampler;
+uniform sampler2D uNoiseSampler;
+uniform lowp vec4 uRandom;
+
+void main() {
+    gl_FragColor = texture2D(uVideoSampler, gl_FragCoord.xy/uWindowSize.xy)
+        + (texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.zw) - 0.75)
+        * texture2D(uNoiseSampler, (gl_FragCoord.xy/vec2(128, 128))+uRandom.xw);
+}
@@ -0,0 +1,22 @@
+attribute vec2 aVertexPosition;
+attribute vec2 aTextureCoord;
+
+uniform vec2 uGlitchPosition;
+uniform float uGlitchWidth;
+uniform lowp vec4 uRandom;
+uniform vec2 uImageRatio;
+
+varying highp vec2 vTextureCoord;
+
+void main() {
+    vec2 vertex = aVertexPosition.xy;
+
+    vertex *= uImageRatio;
+    vertex *= 0.001;
+    vertex *= uGlitchWidth;
+    vertex += uGlitchPosition;
+    vertex += uRandom.xy*0.01;
+
+    gl_Position = vec4(vertex, -1.0, 1.0);
+}
+
@@ -0,0 +1,416 @@
+import resizeToFit from 'intrinsic-scale'
+
+import noiseUrl from "../noise-power.png"
+
+import baseVertSource from "./base.vert?raw"
+import baseFragSource from "./base.frag?raw"
+
+import glitchVertSource from "./glitch.vert?raw"
+import glitchFragSource from "./glitch.frag?raw"
+
+export class Glitcher {
+
+    /** @type {HTMLCanvasElement} */
+    canvas
+
+    glitches = []
+
+    /**
+     * @param {HTMLCanvasElement} canvas
+     */
+    constructor(canvas) {
+        this.canvas = canvas
+        this.videoCanvas = new OffscreenCanvas(10, 10);
+        this.video = document.createElement("video")
+        this.init()
+    }
+
+    init(){
+        this.video.muted = true
+        this.video.loop = true
+        this.video.autoplay = true
+        this.video.src = "/background.webm"
+        this.video.addEventListener("canplay", e => this.video.play())
+
+        this.ctx = this.canvas.getContext("webgl")
+        if(!this.ctx){
+            throw new Error("WebGL isn't supported")
+        }
+
+        let baseProgram = createProgram(this.ctx, baseVertSource, baseFragSource);
+
+        let panelPositionBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelPositionBuffer)
+        const positions = [
+              -1.0,  1.0,
+               1.0,  1.0,
+              -1.0, -1.0,
+               1.0, -1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(positions), this.ctx.STATIC_DRAW)
+
+        let panelUVBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, panelUVBuffer)
+        const uv = [
+              0.0, 0.0,
+              1.0, 0.0,
+              0.0, 1.0,
+              1.0, 1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(uv), this.ctx.STATIC_DRAW)
+
+        let imageTexture = this.ctx.createTexture()
+
+        this.base = {
+            program: baseProgram,
+            aVertexPosition: this.ctx.getAttribLocation(baseProgram, "aVertexPosition"),
+            aTextureCoord: this.ctx.getAttribLocation(baseProgram, "aTextureCoord"),
+            uImageSampler: this.ctx.getUniformLocation(baseProgram, "uImageSampler"),
+            uWindowSize: this.ctx.getUniformLocation(baseProgram, "uWindowSize"),
+            imageTexture: imageTexture,
+            panelUVBuffer: panelUVBuffer,
+            panelPositionsBuffer: panelPositionBuffer,
+        }
+        this.clearImage();
+
+        let glitchPositionBuffer = this.ctx.createBuffer()
+        this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, glitchPositionBuffer)
+        const glitchPosition = [
+            -1.0,  1.0,
+            1.0,  1.0,
+            -1.0, -1.0,
+            1.0, -1.0,
+        ]
+        this.ctx.bufferData(this.ctx.ARRAY_BUFFER, new Float32Array(glitchPosition), this.ctx.STATIC_DRAW)
+        
+        let glitchProgram = createProgram(this.ctx, glitchVertSource, glitchFragSource)
+        let videoFrameTexture = this.ctx.createTexture()
+
+        let noiseTexture = this.ctx.createTexture()
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, noiseTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            1, 1,
+            0,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            new Uint8Array([0, 0, 0, 0])
+        )
+
+        let noiseImage = new Image()
+        noiseImage.addEventListener("load", () => {
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
+            this.ctx.texImage2D(
+                this.ctx.TEXTURE_2D,
+                0,
+                this.ctx.RGBA,
+                this.ctx.RGBA,
+                this.ctx.UNSIGNED_BYTE,
+                noiseImage
+            )
+
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.REPEAT);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.REPEAT);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.NEAREST);
+            this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.NEAREST);
+        })
+        noiseImage.src = noiseUrl
+
+        this.glitch = {
+            program: glitchProgram,
+            aVertexPosition: this.ctx.getAttribLocation(glitchProgram, "aVertexPosition"),
+            uGlitchPosition: this.ctx.getUniformLocation(glitchProgram, "uGlitchPosition"),
+            uGlitchWidth: this.ctx.getUniformLocation(glitchProgram, "uGlitchWidth"),
+            uImageRatio: this.ctx.getUniformLocation(glitchProgram, "uImageRatio"),
+            uWindowSize: this.ctx.getUniformLocation(glitchProgram, "uWindowSize"),
+            uVideoSampler: this.ctx.getUniformLocation(glitchProgram, "uVideoSampler"),
+            uNoiseSampler: this.ctx.getUniformLocation(glitchProgram, "uNoiseSampler"),
+            uRandom: this.ctx.getUniformLocation(glitchProgram, "uRandom"),
+            glitchPositionBuffer: glitchPositionBuffer,
+            videoFrameTexture: videoFrameTexture,
+            noiseTexture: noiseTexture
+        }
+
+        console.log(this.glitch)
+    }
+
+    clearImage(){
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            1, 1,
+            0,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            new Uint8Array([0, 0, 0, 0])
+        )
+    }
+
+    clearGlitch(){
+        this.glitches = []
+    }
+
+    addGlitch(x, y, width=1){
+        let computedStyle = window.getComputedStyle(this.canvas)
+        let clientWidth = parseFloat(computedStyle.width)
+        let clientHeight = parseFloat(computedStyle.height)
+
+        this.glitches.push({
+            x: ((x*2)/clientWidth)-1,
+            y: (((y*2)/clientHeight)-1)*-1,
+            width
+        })
+    }
+
+    /**
+     * @param {File} imageFile 
+     */
+    async setImage(imageFile){
+        if(imageFile == this.currentImageFile){
+            return
+        }
+
+        if(this.currentImage){
+            URL.revokeObjectURL(this.currentImage.src)
+        }
+
+        let image = new Image()
+        const loadProm = new Promise((res, rej) => {
+            function ok(){
+                image.removeEventListener("error", nok)
+                res()
+            }
+
+            function nok(){
+                image.removeEventListener("load", ok)
+                rej()
+            }
+
+            image.addEventListener("load", ok)
+            image.addEventListener("error", nok)
+        })
+        image.src = URL.createObjectURL(imageFile)
+
+        try {
+            await loadProm
+        } catch(e) {
+            URL.revokeObjectURL(image.src)
+            throw e
+        }
+        this.resize(image.width, image.height)
+
+        this.currentImageFile = imageFile
+        this.currentImage = image
+
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            this.currentImage
+        )
+
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
+    }
+
+    async toBlob(type, quality) {
+        this.resize(this.currentImage.width, this.currentImage.height, true)
+        this.render()
+        let blob = await new Promise((res, rej) => this.canvas.toBlob((imageBlob) => {
+            if(imageBlob){
+                res(imageBlob)
+            } else {
+                rej()
+            }
+        }, type, quality))
+        this.resize(this.currentImage.width, this.currentImage.height, false)
+        return blob
+    }
+
+    resize(width, height, force=false){
+        if(!force){
+
+            let computedStyle = window.getComputedStyle(this.canvas)
+            let maxWidth = parseFloat(computedStyle["max-width"])
+            let maxHeight = parseFloat(computedStyle["max-height"])
+            
+            if(window.devicePixelRatio){
+                maxWidth *= window.devicePixelRatio
+                maxHeight *= window.devicePixelRatio
+            }
+
+            if(Number.isNaN(maxWidth)){
+                maxWidth = width
+            }
+
+            if(Number.isNaN(maxHeight)){
+                maxHeight = height
+            }
+
+            let resize = resizeToFit("contain", {width, height}, {width: maxWidth, height: maxHeight})
+
+            this.canvas.width = resize.width
+            this.canvas.height = resize.height
+
+        } else {
+            this.canvas.width = width
+            this.canvas.height = height
+        }
+
+        this.videoCanvas.width = this.canvas.width
+        this.videoCanvas.height = this.canvas.height
+        this.ctx.viewport(0, 0, this.canvas.width, this.canvas.height);
+    }
+
+    updateVideoTexture(){
+        let vctx = this.videoCanvas.getContext("2d")
+        vctx.clearRect(0, 0, this.videoCanvas.width, this.videoCanvas.height)
+        vctx.drawImage(this.video, 0, 0, this.videoCanvas.width, this.videoCanvas.height);
+
+        this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
+        this.ctx.texImage2D(
+            this.ctx.TEXTURE_2D,
+            0,
+            this.ctx.RGBA,
+            this.ctx.RGBA,
+            this.ctx.UNSIGNED_BYTE,
+            this.videoCanvas
+        )
+
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_S, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_WRAP_T, this.ctx.CLAMP_TO_EDGE);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MIN_FILTER, this.ctx.LINEAR);
+        this.ctx.texParameteri(this.ctx.TEXTURE_2D, this.ctx.TEXTURE_MAG_FILTER, this.ctx.LINEAR);
+    }
+
+    render(){
+        if(!this.ctx){
+            throw new Error("Glitcher not initialized, please run init()")
+        }
+
+        this.updateVideoTexture()
+
+        this.ctx.clearColor(0.0, 0.0, 0.0, 0.0)
+        this.ctx.clearDepth(1.0)
+        this.ctx.enable(this.ctx.DEPTH_TEST)
+        this.ctx.enable(this.ctx.LEQUAL)
+
+        this.ctx.clear(this.ctx.COLOR_BUFFER_BIT | this.ctx.DEPTH_BUFFER_BIT)
+
+        { // Base rendering
+            this.ctx.useProgram(this.base.program)
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.base.panelPositionsBuffer)
+            this.ctx.vertexAttribPointer(
+                this.base.aVertexPosition,
+                2, // N components per iteration
+                this.ctx.FLOAT,
+                false, //Normalize,
+                0, // (stride) how many bytes to get from one set of values to the next
+                0, // Start offset
+            )
+            this.ctx.enableVertexAttribArray(this.base.aVertexPosition)
+            
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.base.panelUVBuffer)
+            this.ctx.vertexAttribPointer(
+                this.base.aTextureCoord,
+                2,
+                this.ctx.FLOAT,
+                false,
+                0,
+                0,
+            )
+            this.ctx.enableVertexAttribArray(this.base.aTextureCoord)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE0)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.base.imageTexture)
+
+            this.ctx.uniform2f(this.base.uWindowSize, this.canvas.width, this.canvas.height)
+            this.ctx.uniform1i(this.base.uImageSampler, 0)
+            
+            this.ctx.drawArrays(
+                this.ctx.TRIANGLE_STRIP,
+                0, // Vertex offset
+                4, // Total vertex
+            );
+        }
+
+        { // Glitch rendering
+            this.ctx.useProgram(this.glitch.program)
+            this.ctx.bindBuffer(this.ctx.ARRAY_BUFFER, this.glitch.glitchPositionBuffer)
+            this.ctx.vertexAttribPointer(
+                this.glitch.glitchPositionBuffer,
+                2, // N components per iteration
+                this.ctx.FLOAT,
+                false, //Normalize,
+                0, // (stride) how many bytes to get from one set of values to the next
+                0, // Start offset
+            )
+            this.ctx.enableVertexAttribArray(this.glitch.aVertexPosition)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE0)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.videoFrameTexture)
+            this.ctx.uniform1i(this.glitch.uVideoSampler, 0)
+
+            this.ctx.activeTexture(this.ctx.TEXTURE1)
+            this.ctx.bindTexture(this.ctx.TEXTURE_2D, this.glitch.noiseTexture)
+            this.ctx.uniform1i(this.glitch.uNoiseSampler, 1)
+
+            this.ctx.uniform2f(this.glitch.uWindowSize, this.canvas.width, this.canvas.height)
+            if(this.canvas.width > this.canvas.height){
+                this.ctx.uniform2f(this.glitch.uImageRatio, 1.0, this.canvas.width/this.canvas.height)
+            } else {
+                this.ctx.uniform2f(this.glitch.uImageRatio, this.canvas.height/this.canvas.width, 1.0)
+            }
+
+            for(let glitch of this.glitches) {
+                this.ctx.uniform4f(this.glitch.uRandom,
+                    Math.random(), Math.random(), Math.random(), Math.random()
+                )
+                this.ctx.uniform2f(this.glitch.uGlitchPosition, glitch.x, glitch.y)
+                this.ctx.uniform1f(this.glitch.uGlitchWidth, glitch.width)
+                this.ctx.drawArrays(
+                    this.ctx.TRIANGLE_STRIP,
+                    0, // Vertex offset
+                    4, // Total vertex
+                );
+            }
+        }
+    }
+}
+
+function createProgram(gl, vertSource, fragSource){
+        let vertShader = gl.createShader(gl.VERTEX_SHADER)
+        gl.shaderSource(vertShader, vertSource)
+        gl.compileShader(vertShader)
+
+        if (!gl.getShaderParameter(vertShader, gl.COMPILE_STATUS)) {
+            throw new Error(`failed to compile vertex: ${gl.getShaderInfoLog(vertShader)}`)
+        }
+
+        let fragShader = gl.createShader(gl.FRAGMENT_SHADER)
+        gl.shaderSource(fragShader, fragSource)
+        gl.compileShader(fragShader)
+
+        if (!gl.getShaderParameter(fragShader, gl.COMPILE_STATUS)) {
+            throw new Error(`failed to compile fragment: ${gl.getShaderInfoLog(fragShader)}`)
+        }
+
+        let program = gl.createProgram()
+        gl.attachShader(program, vertShader)
+        gl.attachShader(program, fragShader)
+        gl.linkProgram(program)
+
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            throw new Error(`failed to link shader: ${gl.getProgramInfoLog(program)}`)
+        }
+
+        return program
+}
@@ -13,8 +13,6 @@
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:type" content="website">
-    <!--GUI for background experiments haha-->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
  </head>
  <body>
    <!--TEST REFERENCE-->
@@ -29,379 +27,13 @@
      <strong>nerds</strong>
    </h1>
    <!--BACKGROUND CONTAINER-->
-    <canvas id="canvas"></canvas>
+    <div id="canvas">
+        <video autoplay muted loop src="./background.webm"></video>
+        <div class="overlay"></div>
+    </div>
    <!--VUE ROOT APP CONTAINER-->
    <div id="app"></div>
-    <!--SCRIPT BACKGROUND SHADER-->
-    <script id="vertexShader" type="x-shader/x-vertex">
-        attribute vec2 position;
-        void main() {
-            gl_Position = vec4(position, 0.0, 1.0);
-        }
-    </script>
-    <script id="fragmentShader" type="x-shader/x-fragment">
-        precision highp float;
-
-        uniform vec2 resolution;
-        uniform float time;
-        uniform float seed;
-
-        // GUI-controlled parameters
-        uniform float timeScale;
-        uniform float patternAmp;
-        uniform float patternFreq;
-        uniform float bloomStrength;
-        uniform float saturation;
-        uniform float grainAmount;
-        uniform vec3 colorTint;
-        uniform float minCircleSize;
-        uniform float circleStrength;
-        uniform float distortX;
-        uniform float distortY;
-
-        // Noise functions for 3D simplex noise
-        vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-        vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
-        vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
-        vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
-
-        // Random function that uses the seed
-        float rand(vec3 co) {
-            return fract(sin(dot(co.xyz + vec3(seed * 0.1), vec3(12.9898, 78.233, 53.539))) * 43758.5453);
-        }
-
-        // Pseudo-random function for noise generation
-        float random(vec2 st) {
-            return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
-        }
-
-        // 3D Simplex noise implementation
-        float snoise3D(vec3 v) {
-          const vec2 C = vec2(1.0/6.0, 1.0/3.0);
-          const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
-
-          // First corner
-          vec3 i  = floor(v + dot(v, C.yyy));
-          vec3 x0 = v - i + dot(i, C.xxx);
-
-          // Other corners
-          vec3 g = step(x0.yzx, x0.xyz);
-          vec3 l = 1.0 - g;
-          vec3 i1 = min(g.xyz, l.zxy);
-          vec3 i2 = max(g.xyz, l.zxy);
-
-          vec3 x1 = x0 - i1 + C.xxx;
-          vec3 x2 = x0 - i2 + C.yyy;
-          vec3 x3 = x0 - D.yyy;
-
-          // Permutations
-          i = mod289(i);
-          vec4 p = permute(permute(permute(
-                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
-                  + i.y + vec4(0.0, i1.y, i2.y, 1.0))
-                  + i.x + vec4(0.0, i1.x, i2.x, 1.0));
-
-          // Gradients: 7x7 points over a square, mapped onto an octahedron.
-          // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
-          float n_ = 0.142857142857; // 1.0/7.0
-          vec3 ns = n_ * D.wyz - D.xzx;
-
-          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
-
-          vec4 x_ = floor(j * ns.z);
-          vec4 y_ = floor(j - 7.0 * x_);
-
-          vec4 x = x_ *ns.x + ns.yyyy;
-          vec4 y = y_ *ns.x + ns.yyyy;
-          vec4 h = 1.0 - abs(x) - abs(y);
-
-          vec4 b0 = vec4(x.xy, y.xy);
-          vec4 b1 = vec4(x.zw, y.zw);
-
-          vec4 s0 = floor(b0)*2.0 + 1.0;
-          vec4 s1 = floor(b1)*2.0 + 1.0;
-          vec4 sh = -step(h, vec4(0.0));
-
-          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
-          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
-
-          vec3 p0 = vec3(a0.xy, h.x);
-          vec3 p1 = vec3(a0.zw, h.y);
-          vec3 p2 = vec3(a1.xy, h.z);
-          vec3 p3 = vec3(a1.zw, h.w);
-
-          // Normalise gradients
-          vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
-          p0 *= norm.x;
-          p1 *= norm.y;
-          p2 *= norm.z;
-          p3 *= norm.w;
-
-          // Mix final noise value
-          vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
-          m = m * m;
-          return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
-        }
-
-        // Modified fbm function to use 3D noise
-        float fbm3D(vec3 p) {
-            float sum = 0.0;
-            float amp = patternAmp;
-            float freq = patternFreq;
-
-            // Create seed-based offsets using prime multipliers
-            vec3 seedOffset = vec3(
-                sin(seed * 0.731) * cos(seed * 0.293) * 1.0,
-                cos(seed * 0.897) * sin(seed * 0.413) * 1.0,
-                sin(seed * 0.529) * cos(seed * 0.671) * 1.0
-            );
-
-            // Use octaves with better frequency scaling
-            for(int i = 0; i < 2; i++) {
-                // Create unique rotation for each octave to break grid patterns
-                float angle = seed * 0.1 + float(i) * 0.01;
-                mat2 rotation = mat2(
-                    cos(angle), -sin(angle),
-                    sin(angle), cos(angle)
-                );
-
-                // Rotate coordinates slightly for each octave
-                vec2 rotatedP = rotation * p.xy;
-                vec3 rotated3D = vec3(rotatedP, p.z);
-
-                // Use prime-number-based offsets to avoid repeating patterns
-                vec3 octaveOffset = seedOffset + vec3(
-                    sin(float(i) * 1.731 + seed * 0.47),
-                    cos(float(i) * 1.293 + seed * 0.83),
-                    sin(float(i) * 1.453 + seed * 0.61)
-                );
-
-                // Apply progressive domain warping for more organic results
-                vec3 warpedP = rotated3D + octaveOffset;
-                if (i > 0) {
-                    // Add slight domain warping based on previous octave
-                    warpedP += vec3(
-                        sin(sum * 2.14 + warpedP.y * 1.5),
-                        cos(sum * 1.71 + warpedP.x * 1.5),
-                        sin(sum * 1.93 + warpedP.z * 1.5)
-                    ) * 0.1 * float(i);
-                }
-
-                // Add contribution from this octave
-                sum += amp * snoise3D(warpedP * freq);
-
-                // Use better persistence values (slower amplitude reduction)
-                amp *= 0.8;
-
-                // Use better lacunarity values (more moderate frequency increase)
-                freq *= 0.8;
-            }
-
-            // Normalize and add slight contrast adjustment
-            return sum * 0.5 + 0.5;
-        }
-
-        void main() {
-            vec2 uv = gl_FragCoord.xy / resolution.xy;
-
-            // Adjust aspect ratio
-            uv.x *= resolution.x / resolution.y;
-
-            // Apply timeScale from GUI
-            float slowTime = time * timeScale;
-
-            // Create seed-influenced flow vectors for different pattern on each refresh
-            vec2 flow1 = vec2(
-                sin(slowTime * 0.25 + seed * 0.42) * 0.3 + sin(slowTime * 0.14 + seed * 0.23) * 0.2,
-                cos(slowTime * 0.22 + seed * 0.31) * 0.3 + cos(slowTime * 0.11 + seed * 0.17) * 0.2
-            );
-
-            vec2 flow2 = vec2(
-                sin(slowTime * 0.16 + 1.7 + seed * 0.13) * 0.4 + sin(slowTime * 0.18 + seed * 0.29) * 0.1,
-                cos(slowTime * 0.19 + 2.3 + seed * 0.19) * 0.4 + cos(slowTime * 0.11 + seed * 0.33) * 0.1
-            );
-
-            vec2 flow3 = vec2(
-                sin(slowTime * 0.13 + 3.4 + seed * 0.25) * 0.25 + sin(slowTime * 0.22 + seed * 0.11) * 0.15,
-                cos(slowTime * 0.18 + 1.2 + seed * 0.37) * 0.25 + cos(slowTime * 0.25 + seed * 0.27) * 0.15
-            );
-
-            float noiseScale1 = 10000.0;
-
-            // Main light layer with enhanced 3D liquid motion - using 3D noise
-            // The third component determines how the pattern changes over time
-            float timeComponent = slowTime * 5.5 + sin(seed * 0.63) * 0.2;
-            float lightPattern = fbm3D(vec3(uv * noiseScale1, timeComponent));
-
-            float combinedPattern = lightPattern * 0.25;
-
-            // Start with a seed-influenced base color
-            vec3 baseColor = vec3(
-                0.6 + sin(seed * 0.4) * 0.1,
-                0.9 + cos(seed * 0.3) * 0.05,
-                0.92 + sin(seed * 0.5) * 0.05
-            );
-
-            // Define pastel colors with slight seed-based variations
-            float colorSeed1 = sin(seed * 0.73) * 0.88;
-            float colorSeed2 = cos(seed * 0.51) * 0.28;
-            float colorSeed3 = sin(seed * 0.92) * 0.48;
-
-            vec3 pastelGreen = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.85 + colorSeed3);
-            vec3 pastelBlue = vec3(0.85 + colorSeed3, 0.9 + colorSeed1, 0.98 + colorSeed2);
-            vec3 pastelPink = vec3(0.98 + colorSeed2, 0.88 + colorSeed3, 0.92 + colorSeed1);
-            vec3 pastelYellow = vec3(0.98 + colorSeed3, 0.95 + colorSeed1, 0.85 + colorSeed2);
-            vec3 brightPink = vec3(0.98 + colorSeed1, 0.85 + colorSeed2, 0.92 + colorSeed3);
-            vec3 pastelLavender = vec3(0.92 + colorSeed2, 0.88 + colorSeed3, 0.98 + colorSeed1);
-            vec3 pastelPeach = vec3(0.98 + colorSeed3, 0.92 + colorSeed1, 0.87 + colorSeed2);
-            vec3 pastelTeal = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.95 + colorSeed3);
-            vec3 pastelCoral = vec3(0.98 + colorSeed2, 0.88 + colorSeed1, 0.85 + colorSeed3);
-            vec3 pastelMint = vec3(0.88 + colorSeed3, 0.98 + colorSeed2, 0.91 + colorSeed1);
-            vec3 pastelLilac = vec3(0.91 + colorSeed1, 0.85 + colorSeed3, 0.98 + colorSeed2);
-            vec3 pastelSkyBlue = vec3(0.85 + colorSeed2, 0.91 + colorSeed1, 0.98 + colorSeed3);
-
-            // Using larger color patches with 3D liquid-like noise and seed influence
-            float verticalFlow = sin(uv.y * 3.0 + slowTime * 0.2 + seed * 0.4) * 1.0;
-
-            // Creating more complex flow patterns for liquid movement
-            vec2 liquidFlow1 = flow1 + vec2(verticalFlow, sin(uv.x * 2.5 + slowTime * 0.10 + seed * 0.3) * 0.2);
-            vec2 liquidFlow2 = flow2 + vec2(cos(uv.y * 2.2 + slowTime * 0.05 + seed * 0.5) * 0.15, verticalFlow);
-            vec2 liquidFlow3 = flow3 + vec2(verticalFlow * 0.5, cos(uv.x * 1.8 - slowTime * 0.07 + seed * 0.7) * 0.25);
-
-            // Add seed-dependent scale factors for noise
-            float noiseSeedFactor1 = 0.15 * (1.0 + sin(seed * 0.3) * 0.3);
-            float noiseSeedFactor2 = 0.2 * (1.0 + cos(seed * 0.5) * 0.3);
-            float noiseSeedFactor3 = 0.12 * (1.0 + sin(seed * 0.7) * 0.3);
-
-            // Using 3D noise for color patterns with different time components for variety
-            float colorNoise1 = fbm3D(vec3(uv * noiseSeedFactor1 + liquidFlow1 * 0.03, slowTime * 0.02 + seed * 0.27));
-
-            // Adjust thresholds with seed influence for variety
-            float threshSeed1 = 0.0 + sin(seed * 0.4) * 0.15;
-            float threshSeed2 = 0.15 + cos(seed * 0.6) * 0.15;
-            float threshSeed3 = 0.25 + sin(seed * 0.8) * 0.15;
-
-            float colorMixValue1 = smoothstep(0.0, threshSeed1, colorNoise1);
-            float colorMixValue2 = smoothstep(0.0, threshSeed2, colorNoise1);
-            float colorMixValue3 = smoothstep(0.0, threshSeed3, colorNoise1);
-
-            // Start with base color and mix in expanded pastel palette
-            vec3 colorVariation = baseColor;
-
-            // Layer 1: Primary colors with seed-influenced mix factors
-            float mixFactor1 = 2.2 + sin(seed * 0.3) * 0.5;
-            float mixFactor2 = 2.0 + cos(seed * 0.5) * 0.5;
-            float mixFactor3 = 2.0 + sin(seed * 0.7) * 0.5;
-            float mixFactor4 = 2.0 + cos(seed * 0.9) * 0.5;
-
-            colorVariation = mix(colorVariation, pastelBlue, colorMixValue1 * mixFactor1);
-            colorVariation = mix(colorVariation, pastelPink, (1.0 - colorMixValue1) * colorMixValue2 * mixFactor2);
-            colorVariation = mix(colorVariation, pastelGreen, colorMixValue2 * (1.0 - colorMixValue1) * mixFactor3);
-            colorVariation = mix(colorVariation, pastelYellow, (1.0 - colorMixValue2) * colorMixValue1 * mixFactor4);
-
-            // Layer 2: New pastel colors with seed-influenced mix factors
-            float mixFactor5 = 1.8 + sin(seed * 1.1) * 0.4;
-            float mixFactor6 = 1.8 + cos(seed * 1.3) * 0.4;
-            float mixFactor7 = 1.7 + sin(seed * 1.5) * 0.4;
-            float mixFactor8 = 1.6 + cos(seed * 1.7) * 0.4;
-            float mixFactor9 = 1.5 + sin(seed * 1.9) * 0.4;
-
-            colorVariation = mix(colorVariation, brightPink, (colorMixValue1 * colorMixValue2) * mixFactor5);
-            colorVariation = mix(colorVariation, pastelLavender, (1.0 - colorMixValue3) * colorMixValue1 * mixFactor6);
-            colorVariation = mix(colorVariation, pastelPeach, colorMixValue3 * (1.0 - colorMixValue2) * mixFactor7);
-            colorVariation = mix(colorVariation, pastelTeal, (colorMixValue2 * colorMixValue3) * mixFactor8);
-            colorVariation = mix(colorVariation, pastelCoral, ((1.0 - colorMixValue1) * colorMixValue3) * mixFactor9);
-
-            // Layer 3: Additional colors with seed-influenced noise combinations
-            float seedOffset1 = sin(seed * 2.1) * 0.05;
-            float seedOffset2 = cos(seed * 2.3) * 0.05;
-
-            float mixValue4 = smoothstep(0.0, 1.0, float(uv * (0.18 + seedOffset1)));
-            float mixValue5 = mixValue4 - (sin(seed*0.6)*0.4);
-
-            float mixFactor10 = 1.7 + sin(seed * 2.5) * 0.4;
-            float mixFactor11 = 1.8 + cos(seed * 2.7) * 0.4;
-            float mixFactor12 = 1.5 + sin(seed * 2.9) * 0.4;
-
-            colorVariation = mix(colorVariation, pastelMint, mixValue4 * (1.0 - mixValue5) * mixFactor10);
-            colorVariation = mix(colorVariation, pastelLilac, (1.0 - mixValue4) * mixValue5 * mixFactor11);
-            colorVariation = mix(colorVariation, pastelSkyBlue, mixValue4 * mixValue5 * mixFactor12);
-
-            // Adjust pattern brightness with seed influence
-            float brightnessFactor = 1.0 + sin(seed * 0.5) * 2.1;
-            combinedPattern = pow(combinedPattern * 0.2 + 0.8, brightnessFactor);
-
-            // Create light spots with seed-influenced threshold
-            float lightThreshold = 1.0 + sin(seed * 0.6) * 0.8;
-            float lightSpots = smoothstep(0.0, lightThreshold, combinedPattern);
-
-            // Enhanced circular light patterns with seed-influenced distortion
-            float distortionAmount = 1.0 + cos(seed * 0.7) * 5.05;
-            float distortion = sin(slowTime * 0.1 + seed) * distortionAmount;
-
-            vec2 distortedUV = fract(uv * 1.0 + vec2(
-                sin(uv.y * 2.0 + slowTime * 0.15 + seed * 0.8) * distortY,
-                cos(uv.x * 1.8 + slowTime * 0.1 + seed * 0.9) * distortX
-            ));
-
-            // Adjust circular spots with seed influence
-            float circleSize = minCircleSize + sin(seed) * 1.3;
-            float circleThreshold = 0.0 + cos(seed * 1.3) * 2.05;
-            float circularSpots = smoothstep(0.0, circleThreshold, 1.0 - length((distortedUV - 0.5) * (circleSize + distortion)));
-
-            // Mix with liquid movement
-            float mixRatio = 0.0 + sin(seed * 1.5) * circleStrength;
-            lightSpots = mix(lightSpots, circularSpots * lightSpots, mixRatio);
-
-            // Apply liquid-like diffusion with seed influence and 3D noise
-            float diffusionScale = 0.0 + cos(seed * 1.7) * 5.0;
-            float diffusedLightSpots = fbm3D(vec3(
-                uv * diffusionScale + vec2(
-                    sin(slowTime * 0.03 + uv.x + seed * 1.9) * 0.2,
-                    cos(slowTime * 0.02 + uv.y + seed * 2.1) * 0.2
-                ),
-                slowTime * 0.05 + sin(seed * 0.76) * 0.5
-            )) * lightSpots;
-
-            // Mix diffusion with seed influence
-            //float diffusionMix = 0.7 + sin(seed * 2.3) * 0.1;
-            float diffusionMix = 1.0;
-            lightSpots = mix(lightSpots, diffusedLightSpots, diffusionMix);
-
-            // Final pattern mix
-            float patternMix = 1.0;
-            combinedPattern = mix(combinedPattern, lightSpots, patternMix);
-
-            float finalValue = combinedPattern;
-
-            // Use the color variation and apply color tint from GUI
-            vec3 color = finalValue * colorVariation * colorTint;
-
-            // Bloom with GUI-controlled bloomStrength
-            float bloomThreshold = 1.0;
-            float bloom = smoothstep(0.0, bloomThreshold, finalValue) * bloomStrength;
-            color += bloom;
-
-            // Grain with GUI-controlled grainAmount
-            vec2 noiseCoord = uv;
-            float noise = random(noiseCoord + time * 0.0015) * grainAmount;
-            color = color + vec3(noise);
-
-            // Saturation with GUI control
-            float luminance = dot(color, vec3(0.299, 0.587, 0.114));
-            vec3 saturatedColor = mix(vec3(luminance), color, saturation);
-            float satMix = 1.0;
-            color = mix(color, saturatedColor, satMix);
-
-            gl_FragColor = vec4(color, 1.0);
-        }
-    </script>
    <!--LINK SCRIPT VUE ROOT APP-->
    <script type="module" src="/src/main.js"></script>
  </body>
-  <!--LINK SCRIPT BACKGROUND-->
-  <script src="mp4-muxer-main/build/mp4-muxer.js"></script>
-  <script src="helperFunctions.js"></script>
-  <script src="canvasVideoExport.js"></script>
-  <script src="main.js"></script>
 </html>
@@ -0,0 +1,408 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DRAGS AND NERDS #2</title>
+    <link rel="icon" type="image/x-icon" href="./favicon.jpg">
+    <!--OPENGRAPH-->
+    <meta property="og:title" content="Drags and Nerds #2">
+    <meta property="og:description" content="Drag shows, musique électronique, synthés vidéos et autre performances nerds">
+    <meta property="og:url" content="https://drags-nerds.net/">
+    <meta property="og:image" content="https://drags-nerds.net/dnn-screen.png">
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:type" content="website">
+    <!--GUI for background experiments haha-->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
+  </head>
+  <body>
+    <!--TEST REFERENCE-->
+    <h1 class="referenceText">
+      <strong>drags and nerds</strong>
+      <p>
+        Drag shows, musique électronique, synthés vidéos et autre performances nerds
+      </p>
+      <strong>drag</strong>
+      <strong>nerd</strong>
+      <strong>drags</strong>
+      <strong>nerds</strong>
+    </h1>
+    <!--BACKGROUND CONTAINER-->
+    <canvas id="canvas"></canvas>
+    <!--VUE ROOT APP CONTAINER-->
+    <div id="app"></div>
+    <!--SCRIPT BACKGROUND SHADER-->
+    <script id="vertexShader" type="x-shader/x-vertex">
+        attribute vec2 position;
+        void main() {
+            gl_Position = vec4(position, 0.0, 1.0);
+        }
+    </script>
+    <script id="fragmentShader" type="x-shader/x-fragment">
+        precision highp float;
+
+        uniform vec2 resolution;
+        uniform float time;
+        uniform float seed;
+
+        // GUI-controlled parameters
+        uniform float timeScale;
+        uniform float patternAmp;
+        uniform float patternFreq;
+        uniform float bloomStrength;
+        uniform float saturation;
+        uniform float grainAmount;
+        uniform vec3 colorTint;
+        uniform float minCircleSize;
+        uniform float circleStrength;
+        uniform float distortX;
+        uniform float distortY;
+
+        // Noise functions for 3D simplex noise
+        vec3 mod289(vec3 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+        vec4 mod289(vec4 x) { return x - floor(x * (1.0 / 289.0)) * 289.0; }
+        vec4 permute(vec4 x) { return mod289(((x*34.0)+1.0)*x); }
+        vec4 taylorInvSqrt(vec4 r) { return 1.79284291400159 - 0.85373472095314 * r; }
+
+        // Random function that uses the seed
+        float rand(vec3 co) {
+            return fract(sin(dot(co.xyz + vec3(seed * 0.1), vec3(12.9898, 78.233, 53.539))) * 43758.5453);
+        }
+
+        // Pseudo-random function for noise generation
+        float random(vec2 st) {
+            return fract(sin(dot(st.xy, vec2(12.9898, 78.233))) * 43758.5453123);
+        }
+
+        // 3D Simplex noise implementation
+        float snoise3D(vec3 v) {
+          const vec2 C = vec2(1.0/6.0, 1.0/3.0);
+          const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
+
+          // First corner
+          vec3 i  = floor(v + dot(v, C.yyy));
+          vec3 x0 = v - i + dot(i, C.xxx);
+
+          // Other corners
+          vec3 g = step(x0.yzx, x0.xyz);
+          vec3 l = 1.0 - g;
+          vec3 i1 = min(g.xyz, l.zxy);
+          vec3 i2 = max(g.xyz, l.zxy);
+
+          vec3 x1 = x0 - i1 + C.xxx;
+          vec3 x2 = x0 - i2 + C.yyy;
+          vec3 x3 = x0 - D.yyy;
+
+          // Permutations
+          i = mod289(i);
+          vec4 p = permute(permute(permute(
+                    i.z + vec4(0.0, i1.z, i2.z, 1.0))
+                  + i.y + vec4(0.0, i1.y, i2.y, 1.0))
+                  + i.x + vec4(0.0, i1.x, i2.x, 1.0));
+
+          // Gradients: 7x7 points over a square, mapped onto an octahedron.
+          // The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
+          float n_ = 0.142857142857; // 1.0/7.0
+          vec3 ns = n_ * D.wyz - D.xzx;
+
+          vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
+
+          vec4 x_ = floor(j * ns.z);
+          vec4 y_ = floor(j - 7.0 * x_);
+
+          vec4 x = x_ *ns.x + ns.yyyy;
+          vec4 y = y_ *ns.x + ns.yyyy;
+          vec4 h = 1.0 - abs(x) - abs(y);
+
+          vec4 b0 = vec4(x.xy, y.xy);
+          vec4 b1 = vec4(x.zw, y.zw);
+
+          vec4 s0 = floor(b0)*2.0 + 1.0;
+          vec4 s1 = floor(b1)*2.0 + 1.0;
+          vec4 sh = -step(h, vec4(0.0));
+
+          vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
+          vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
+
+          vec3 p0 = vec3(a0.xy, h.x);
+          vec3 p1 = vec3(a0.zw, h.y);
+          vec3 p2 = vec3(a1.xy, h.z);
+          vec3 p3 = vec3(a1.zw, h.w);
+
+          // Normalise gradients
+          vec4 norm = taylorInvSqrt(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+          p0 *= norm.x;
+          p1 *= norm.y;
+          p2 *= norm.z;
+          p3 *= norm.w;
+
+          // Mix final noise value
+          vec4 m = max(0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3)), 0.0);
+          m = m * m;
+          return 42.0 * dot(m*m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+        }
+
+        // Modified fbm function to use 3D noise
+        float fbm3D(vec3 p) {
+            float sum = 0.0;
+            float amp = patternAmp;
+            float freq = patternFreq;
+
+            // Create seed-based offsets using prime multipliers
+            vec3 seedOffset = vec3(
+                sin(seed * 0.731) * cos(seed * 0.293) * 1.0,
+                cos(seed * 0.897) * sin(seed * 0.413) * 1.0,
+                sin(seed * 0.529) * cos(seed * 0.671) * 1.0
+            );
+
+            // Use octaves with better frequency scaling
+            for(int i = 0; i < 2; i++) {
+                // Create unique rotation for each octave to break grid patterns
+                float angle = seed * 0.1 + float(i) * 0.01;
+                mat2 rotation = mat2(
+                    cos(angle), -sin(angle),
+                    sin(angle), cos(angle)
+                );
+
+                // Rotate coordinates slightly for each octave
+                vec2 rotatedP = rotation * p.xy;
+                vec3 rotated3D = vec3(rotatedP, p.z);
+
+                // Use prime-number-based offsets to avoid repeating patterns
+                vec3 octaveOffset = seedOffset + vec3(
+                    sin(float(i) * 1.731 + seed * 0.47),
+                    cos(float(i) * 1.293 + seed * 0.83),
+                    sin(float(i) * 1.453 + seed * 0.61)
+                );
+
+                // Apply progressive domain warping for more organic results
+                vec3 warpedP = rotated3D + octaveOffset;
+                if (i > 0) {
+                    // Add slight domain warping based on previous octave
+                    warpedP += vec3(
+                        sin(sum * 2.14 + warpedP.y * 1.5),
+                        cos(sum * 1.71 + warpedP.x * 1.5),
+                        sin(sum * 1.93 + warpedP.z * 1.5)
+                    ) * 0.1 * float(i);
+                }
+
+                // Add contribution from this octave
+                sum += amp * snoise3D(warpedP * freq);
+
+                // Use better persistence values (slower amplitude reduction)
+                amp *= 0.8;
+
+                // Use better lacunarity values (more moderate frequency increase)
+                freq *= 0.8;
+            }
+
+            // Normalize and add slight contrast adjustment
+            return sum * 0.5 + 0.5;
+        }
+
+        void main() {
+            vec2 uv = gl_FragCoord.xy / resolution.xy;
+
+            // Adjust aspect ratio
+            uv.x *= resolution.x / resolution.y;
+
+            // Apply timeScale from GUI
+            float slowTime = time * timeScale;
+
+            // Create seed-influenced flow vectors for different pattern on each refresh
+            vec2 flow1 = vec2(
+                sin(slowTime * 0.25 + seed * 0.42) * 0.3 + sin(slowTime * 0.14 + seed * 0.23) * 0.2,
+                cos(slowTime * 0.22 + seed * 0.31) * 0.3 + cos(slowTime * 0.11 + seed * 0.17) * 0.2
+            );
+
+            vec2 flow2 = vec2(
+                sin(slowTime * 0.16 + 1.7 + seed * 0.13) * 0.4 + sin(slowTime * 0.18 + seed * 0.29) * 0.1,
+                cos(slowTime * 0.19 + 2.3 + seed * 0.19) * 0.4 + cos(slowTime * 0.11 + seed * 0.33) * 0.1
+            );
+
+            vec2 flow3 = vec2(
+                sin(slowTime * 0.13 + 3.4 + seed * 0.25) * 0.25 + sin(slowTime * 0.22 + seed * 0.11) * 0.15,
+                cos(slowTime * 0.18 + 1.2 + seed * 0.37) * 0.25 + cos(slowTime * 0.25 + seed * 0.27) * 0.15
+            );
+
+            float noiseScale1 = 10000.0;
+
+            // Main light layer with enhanced 3D liquid motion - using 3D noise
+            // The third component determines how the pattern changes over time
+            float timeComponent = slowTime * 5.5 + sin(seed * 0.63) * 0.2;
+            float lightPattern = fbm3D(vec3(uv * noiseScale1, timeComponent));
+            //float lightPattern = 1.0;//fbm3D(vec3(uv * noiseScale1, timeComponent));
+
+            float combinedPattern = lightPattern * 0.25;
+
+            // Start with a seed-influenced base color
+            vec3 baseColor = vec3(
+                0.6 + sin(seed * 0.4) * 0.1,
+                0.9 + cos(seed * 0.3) * 0.05,
+                0.92 + sin(seed * 0.5) * 0.05
+            );
+
+            // Define pastel colors with slight seed-based variations
+            float colorSeed1 = sin(seed * 0.73) * 0.88;
+            float colorSeed2 = cos(seed * 0.51) * 0.28;
+            float colorSeed3 = sin(seed * 0.92) * 0.48;
+
+            vec3 pastelGreen = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.85 + colorSeed3);
+            vec3 pastelBlue = vec3(0.85 + colorSeed3, 0.9 + colorSeed1, 0.98 + colorSeed2);
+            vec3 pastelPink = vec3(0.98 + colorSeed2, 0.88 + colorSeed3, 0.92 + colorSeed1);
+            vec3 pastelYellow = vec3(0.98 + colorSeed3, 0.95 + colorSeed1, 0.85 + colorSeed2);
+            vec3 brightPink = vec3(0.98 + colorSeed1, 0.85 + colorSeed2, 0.92 + colorSeed3);
+            vec3 pastelLavender = vec3(0.92 + colorSeed2, 0.88 + colorSeed3, 0.98 + colorSeed1);
+            vec3 pastelPeach = vec3(0.98 + colorSeed3, 0.92 + colorSeed1, 0.87 + colorSeed2);
+            vec3 pastelTeal = vec3(0.85 + colorSeed1, 0.95 + colorSeed2, 0.95 + colorSeed3);
+            vec3 pastelCoral = vec3(0.98 + colorSeed2, 0.88 + colorSeed1, 0.85 + colorSeed3);
+            vec3 pastelMint = vec3(0.88 + colorSeed3, 0.98 + colorSeed2, 0.91 + colorSeed1);
+            vec3 pastelLilac = vec3(0.91 + colorSeed1, 0.85 + colorSeed3, 0.98 + colorSeed2);
+            vec3 pastelSkyBlue = vec3(0.85 + colorSeed2, 0.91 + colorSeed1, 0.98 + colorSeed3);
+
+            // Using larger color patches with 3D liquid-like noise and seed influence
+            float verticalFlow = sin(uv.y * 3.0 + slowTime * 0.2 + seed * 0.4) * 1.0;
+
+            // Creating more complex flow patterns for liquid movement
+            vec2 liquidFlow1 = flow1 + vec2(verticalFlow, sin(uv.x * 2.5 + slowTime * 0.10 + seed * 0.3) * 0.2);
+            vec2 liquidFlow2 = flow2 + vec2(cos(uv.y * 2.2 + slowTime * 0.05 + seed * 0.5) * 0.15, verticalFlow);
+            vec2 liquidFlow3 = flow3 + vec2(verticalFlow * 0.5, cos(uv.x * 1.8 - slowTime * 0.07 + seed * 0.7) * 0.25);
+
+            // Add seed-dependent scale factors for noise
+            float noiseSeedFactor1 = 0.15 * (1.0 + sin(seed * 0.3) * 0.3);
+            float noiseSeedFactor2 = 0.2 * (1.0 + cos(seed * 0.5) * 0.3);
+            float noiseSeedFactor3 = 0.12 * (1.0 + sin(seed * 0.7) * 0.3);
+
+            // Using 3D noise for color patterns with different time components for variety
+            float colorNoise1 = fbm3D(vec3(uv * noiseSeedFactor1 + liquidFlow1 * 0.03, slowTime * 0.02 + seed * 0.27));
+
+            // Adjust thresholds with seed influence for variety
+            float threshSeed1 = 0.0 + sin(seed * 0.4) * 0.15;
+            float threshSeed2 = 0.15 + cos(seed * 0.6) * 0.15;
+            float threshSeed3 = 0.25 + sin(seed * 0.8) * 0.15;
+
+            float colorMixValue1 = smoothstep(0.0, threshSeed1, colorNoise1);
+            float colorMixValue2 = smoothstep(0.0, threshSeed2, colorNoise1);
+            float colorMixValue3 = smoothstep(0.0, threshSeed3, colorNoise1);
+
+            // Start with base color and mix in expanded pastel palette
+            vec3 colorVariation = baseColor;
+
+            // Layer 1: Primary colors with seed-influenced mix factors
+            float mixFactor1 = 2.2 + sin(seed * 0.3) * 0.5;
+            float mixFactor2 = 2.0 + cos(seed * 0.5) * 0.5;
+            float mixFactor3 = 2.0 + sin(seed * 0.7) * 0.5;
+            float mixFactor4 = 2.0 + cos(seed * 0.9) * 0.5;
+
+            colorVariation = mix(colorVariation, pastelBlue, colorMixValue1 * mixFactor1);
+            colorVariation = mix(colorVariation, pastelPink, (1.0 - colorMixValue1) * colorMixValue2 * mixFactor2);
+            colorVariation = mix(colorVariation, pastelGreen, colorMixValue2 * (1.0 - colorMixValue1) * mixFactor3);
+            colorVariation = mix(colorVariation, pastelYellow, (1.0 - colorMixValue2) * colorMixValue1 * mixFactor4);
+
+            // Layer 2: New pastel colors with seed-influenced mix factors
+            float mixFactor5 = 1.8 + sin(seed * 1.1) * 0.4;
+            float mixFactor6 = 1.8 + cos(seed * 1.3) * 0.4;
+            float mixFactor7 = 1.7 + sin(seed * 1.5) * 0.4;
+            float mixFactor8 = 1.6 + cos(seed * 1.7) * 0.4;
+            float mixFactor9 = 1.5 + sin(seed * 1.9) * 0.4;
+
+            colorVariation = mix(colorVariation, brightPink, (colorMixValue1 * colorMixValue2) * mixFactor5);
+            colorVariation = mix(colorVariation, pastelLavender, (1.0 - colorMixValue3) * colorMixValue1 * mixFactor6);
+            colorVariation = mix(colorVariation, pastelPeach, colorMixValue3 * (1.0 - colorMixValue2) * mixFactor7);
+            colorVariation = mix(colorVariation, pastelTeal, (colorMixValue2 * colorMixValue3) * mixFactor8);
+            colorVariation = mix(colorVariation, pastelCoral, ((1.0 - colorMixValue1) * colorMixValue3) * mixFactor9);
+
+            // Layer 3: Additional colors with seed-influenced noise combinations
+            float seedOffset1 = sin(seed * 2.1) * 0.05;
+            float seedOffset2 = cos(seed * 2.3) * 0.05;
+
+            float mixValue4 = smoothstep(0.0, 1.0, float(uv * (0.18 + seedOffset1)));
+            float mixValue5 = mixValue4 - (sin(seed*0.6)*0.4);
+
+            float mixFactor10 = 1.7 + sin(seed * 2.5) * 0.4;
+            float mixFactor11 = 1.8 + cos(seed * 2.7) * 0.4;
+            float mixFactor12 = 1.5 + sin(seed * 2.9) * 0.4;
+
+            colorVariation = mix(colorVariation, pastelMint, mixValue4 * (1.0 - mixValue5) * mixFactor10);
+            colorVariation = mix(colorVariation, pastelLilac, (1.0 - mixValue4) * mixValue5 * mixFactor11);
+            colorVariation = mix(colorVariation, pastelSkyBlue, mixValue4 * mixValue5 * mixFactor12);
+
+            // Adjust pattern brightness with seed influence
+            float brightnessFactor = 1.0 + sin(seed * 0.5) * 2.1;
+            combinedPattern = pow(combinedPattern * 0.2 + 0.8, brightnessFactor);
+
+            // Create light spots with seed-influenced threshold
+            float lightThreshold = 1.0 + sin(seed * 0.6) * 0.8;
+            float lightSpots = smoothstep(0.0, lightThreshold, combinedPattern);
+
+            // Enhanced circular light patterns with seed-influenced distortion
+            float distortionAmount = 1.0 + cos(seed * 0.7) * 5.05;
+            float distortion = sin(slowTime * 0.1 + seed) * distortionAmount;
+
+            vec2 distortedUV = fract(uv * 1.0 + vec2(
+                sin(uv.y * 2.0 + slowTime * 0.15 + seed * 0.8) * distortY,
+                cos(uv.x * 1.8 + slowTime * 0.1 + seed * 0.9) * distortX
+            ));
+
+            // Adjust circular spots with seed influence
+            float circleSize = minCircleSize + sin(seed) * 1.3;
+            float circleThreshold = 0.0 + cos(seed * 1.3) * 2.05;
+            float circularSpots = smoothstep(0.0, circleThreshold, 1.0 - length((distortedUV - 0.5) * (circleSize + distortion)));
+
+            // Mix with liquid movement
+            float mixRatio = 0.0 + sin(seed * 1.5) * circleStrength;
+            lightSpots = mix(lightSpots, circularSpots * lightSpots, mixRatio);
+
+            // Apply liquid-like diffusion with seed influence and 3D noise
+            float diffusionScale = 0.0 + cos(seed * 1.7) * 5.0;
+            float diffusedLightSpots = fbm3D(vec3(
+                uv * diffusionScale + vec2(
+                    sin(slowTime * 0.03 + uv.x + seed * 1.9) * 0.2,
+                    cos(slowTime * 0.02 + uv.y + seed * 2.1) * 0.2
+                ),
+                slowTime * 0.05 + sin(seed * 0.76) * 0.5
+            )) * lightSpots;
+
+            // Mix diffusion with seed influence
+            //float diffusionMix = 0.7 + sin(seed * 2.3) * 0.1;
+            float diffusionMix = 1.0;
+            lightSpots = mix(lightSpots, diffusedLightSpots, diffusionMix);
+
+            // Final pattern mix
+            float patternMix = 1.0;
+            combinedPattern = mix(combinedPattern, lightSpots, patternMix);
+
+            float finalValue = combinedPattern;
+
+            // Use the color variation and apply color tint from GUI
+            vec3 color = finalValue * colorVariation * colorTint;
+
+            // Bloom with GUI-controlled bloomStrength
+            float bloomThreshold = 1.0;
+            float bloom = smoothstep(0.0, bloomThreshold, finalValue) * bloomStrength;
+            color += bloom;
+
+            // Grain with GUI-controlled grainAmount
+            vec2 noiseCoord = uv;
+            float noise =  random(noiseCoord + time * 0.0015) * grainAmount;
+            color = color + vec3(noise);
+
+            // Saturation with GUI control
+            float luminance = dot(color, vec3(0.299, 0.587, 0.114));
+            vec3 saturatedColor = mix(vec3(luminance), color, saturation);
+            float satMix = 1.0;
+            color = mix(color, saturatedColor, satMix);
+
+            gl_FragColor = vec4(color, 1.0);
+        }
+    </script>
+    <!--LINK SCRIPT VUE ROOT APP-->
+    <script type="module" src="/src/main.js"></script>
+  </body>
+  <!--LINK SCRIPT BACKGROUND-->
+  <script src="mp4-muxer-main/build/mp4-muxer.js"></script>
+  <script src="helperFunctions.js"></script>
+  <script src="canvasVideoExport.js"></script>
+  <script src="main.js"></script>
+</html>
@@ -8,6 +8,7 @@
      "name": "v1-com-officielle",
      "version": "0.0.0",
      "dependencies": {
+        "intrinsic-scale": "^5.0.0",
        "vite-svg-loader": "^5.1.1",
        "vue": "^3.5.25",
        "vue3-clipboard": "^1.0.0",
@@ -1442,6 +1443,18 @@
        "delegate": "^3.1.2"
      }
    },
+    "node_modules/intrinsic-scale": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/intrinsic-scale/-/intrinsic-scale-5.0.0.tgz",
+      "integrity": "sha512-NJY7170uG8gYkaGGV0ddakq5VAWSvM2FKhARgXj8OQwod1hQFRBWCXn7dk35bGd+vsRYYnJQw/Qpebk8MWp4dg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/fregante"
+      }
+    },
    "node_modules/keycode": {
      "version": "2.2.1",
      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz",
@@ -1756,9 +1769,9 @@
      }
    },
    "node_modules/vite": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
-      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.2.tgz",
+      "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -9,6 +9,7 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "intrinsic-scale": "^5.0.0",
    "vite-svg-loader": "^5.1.1",
    "vue": "^3.5.25",
    "vue3-clipboard": "^1.0.0",
@@ -1,3 +1,8 @@
 [
-  "vega"
+  "vga_nar6_ta", 
+  "openup42",
+  "berthasse",
+  "arlsn",
+  "djstarheartzzz",
+  "openup42"
 ]
@@ -1,10 +1,30 @@
 [
  {
-    "name": "vega",
+    "name": "vga_nar6_ta",
    "folder": 2
  },
  {
-    "name": "Drags and Nerds /",
+    "name": "drags_nerds",
    "folder": 2
+  },
+  {
+    "name": "berthasse",
+    "folder": 1
+  },
+  {
+    "name": "berthasse",
+    "folder": 0
+  },
+  {
+    "name": "arlsn",
+    "folder": 1
+  },
+  {
+    "name": "djstarheartzzz",
+    "folder": 1
+  },
+  {
+    "name": "openup42",
+    "folder": 1
  }
 ]
@@ -10,7 +10,7 @@
 :root[data-theme="light"]{
  --back-color: white;
  --main-color: black;
-  --accent-color: #C303FF;
+  --accent-color: #FFA64D;
  --neon-color: black;
 }

@@ -118,7 +118,7 @@ html, body{
  scrollbar-width: thin;
 }

-canvas {
+#canvas {
    display: block;
    max-width: 100%;
    position: fixed;
@@ -126,7 +126,27 @@ canvas {
    padding: 0;
    /* margin-top: 0vh; */
    text-align: center;
-    /* height: 100vh; */
+    height: 100vh;
+    width: 100vw;
+    overflow: hidden;
+}
+
+#canvas video {
+  width: 100%;
+  height: 100%;
+  filter: invert(1) saturate(333%) brightness(93%) hue-rotate(90deg);
+  object-fit: cover;
+  transition: 7.77s ease-in;
+}
+
+#canvas .overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  mix-blend-mode: multiply;
+  background: url("./background-noise.png");
 }


@@ -281,11 +301,16 @@ canvas {
 }

 .zFocus{
+  z-index: revert;
  z-index: 1312;
  border-color: var(--accent-color);
  border-width: thick;
 }

+#artistPannel.zFocus{
+  z-index: 3333;
+}
+
 .windowTitle{
  width:100%;
  height:50px;
@@ -17,14 +17,15 @@ function creditsContent(str){
 }

 export async function loadAudioData() {
-  const audioRes = await fetch('./DATA/audioData.json');
+  const audioRes = await fetch('/DATA/audioData.json');
  const aData = await audioRes.json();
+  //console.log("MUSIC :", aData);
  const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");

  if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);

  const pouets = await res.json();
-  const filtered = pouets.filter(p => aData.some(user => p.account.display_name === user));
+  const filtered = pouets.filter(p => aData.some(user => p.account.username === user || p.reblog?.account.username === user.name));
  //console.log(filtered);
  const files = {};
  for (const user of aData) {
@@ -34,18 +35,24 @@ export async function loadAudioData() {
  let audioFiles = [];

  for (const pouet of filtered){
+    let selectedPouet;
+    if (pouet.reblog){
+      selectedPouet = pouet.reblog;
+    } else {
+      selectedPouet = pouet;
+    }
    //ignorer les PJ autres que audio
-    if (pouet.media_attachments?.length > 0 &&
-        !pouet.media_attachments[0].type.includes('audio')) {
+    if (selectedPouet.media_attachments?.length > 0 &&
+        !selectedPouet.media_attachments[0].type.includes('audio')) {
      continue;
    }

-    if(pouet.media_attachments?.length > 0){
-        let credits = creditsContent(pouet.content);
+    if(selectedPouet.media_attachments?.length > 0){
+        let credits = creditsContent(selectedPouet.content);
      let entry = {
        track: credits.track,
        artist: credits.artist,
-        src: pouet.media_attachments[0].url
+        src: selectedPouet.media_attachments[0].url
      }
      audioFiles.push(entry);
    }
@@ -27,20 +27,27 @@ export async function loadMsgData() {
  if(!res.ok) throw new Error(`Server responded with ${res.status} ${res.statusText}`);

  const pouets = await res.json();
-  const filtered = pouets.filter(p => p.account.display_name === 'Drags and Nerds /Live');
-  //console.log(filtered);
+  //console.log("POUETS :" , pouets);
+  const filtered = pouets.filter(p => p.account.username === 'drags_nerds_live' || p.reblog?.account.username === 'drags_nerds_live');
+  //console.log("FILTERED :" , filtered);

  let msgContent = [];

  for (let pouet of filtered){
-    let textInfos = titleAndContent(pouet.content);
-    let dateInfos = idAndDate(pouet.created_at);
+    let selectedPouet;
+    if (pouet.reblog){
+      selectedPouet = pouet.reblog;
+    } else {
+      selectedPouet = pouet;
+    }
+    let textInfos = titleAndContent(selectedPouet.text);
+    let dateInfos = idAndDate(selectedPouet.created_at);
    let entry = {
      title: textInfos.title,
      date: dateInfos.date,
-      dateInfo: pouet.created_at,
+      dateInfo: selectedPouet.created_at,
      content: textInfos.content,
-      like: pouet.favourites_count,
+      like: selectedPouet.favourites_count,
      isLiked: false,
      wasRead: false,
      isSelected: false
@@ -10,10 +10,12 @@ function idAndDate(str){
 function titleAndContent(str){
  let data = str.split(" :");
  let title = "NO_TITLE";
+  let contentData = [""];
  if (data.length > 1){
    title = data[0];
+  } else {
+    contentData = data[0].split('<br>').filter(e => e);
  }
-  let contentData = [""];
  if (data[1]){
    contentData = data[1].split('<br>').filter(e => e);
  }
@@ -22,20 +24,16 @@ function titleAndContent(str){
  for(let line of contentData){
    if(line.includes('http')||line.includes('@')){
      let linkData = line.split("# ");
-      console.log(linkData);
-      let linkNoFormat = linkData[1].split("\"");
+      //console.log(linkData[1]);
+      let linkNoFormat;
      let url = "";
-      for(let el of linkNoFormat){
-        if(el.includes('http')){
-          url = el;
-          break
-        } else if(el.includes('@')){
-          url = 'mailto:' + el;
-          break
-        } else {
-          continue
-        }
+      if (linkData[1].includes('http')){
+        linkNoFormat = linkData[1].split("\"");
+        url = linkNoFormat[1];
+      } else if (linkData[1].includes('@')){
+          url = 'mailto:' + linkData[1];
      }
+      //console.log("url info", url)
      src.push({
        caption: linkData[0],
        url: url
@@ -56,8 +54,8 @@ function exceptionKey(user, content){
  let key = "";
  if (data.length > 1) key = data[1].split('<br>')[0];
  //console.log(key);
-  if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="Drags and Nerds /") return true;
-  if (user === "Drags and Nerds /"){
+  if (key === "bm90X3dlYnNpdGVfY29udGVudA==" && user !=="drags_nerds") return true;
+  if (user === "drags_nerds"){
    if(key != "c2VuZF9tZXNzYWdlX3RvX3dlYnNpdGU="){
      return true;
    }
@@ -65,8 +63,13 @@ function exceptionKey(user, content){
  return false;
 }

+function videoExt(str){
+  let data = str.split('.');
+  return data.at(-1)
+}
+
 export async function loadPeopleData() {
-  const usernamesRes = await fetch('./DATA/peopleData.json');
+  const usernamesRes = await fetch('/DATA/peopleData.json');
  const pData = await usernamesRes.json();
  //console.log("USERS :", pData);
  const res = await fetch("https://pouet.drags-nerds.net/api/v1/timelines/public?local=true&limit=40");
@@ -76,7 +79,7 @@ export async function loadPeopleData() {

  const pouets = await res.json();
  //console.log("POUETS :" , pouets);
-  const filtered = pouets.filter(p => pData.some(user => p.account.display_name === user.name));
+  const filtered = pouets.filter(p => pData.some(user => p.account.username === user.name || p.reblog?.account.username === user.name));
  //console.log("FILTERED :" , filtered);
  const files = {};
  for (const user of pData) {
@@ -84,75 +87,111 @@ export async function loadPeopleData() {
  }
  const description = {};
  for (const user of pData){
-    const pouet = filtered.find(p => p.account.display_name === user.name);
+    const pouet = filtered.find(p => p.account.username === user.name || p.reblog?.account.username === user.name);
    if (pouet){
-      description[user.name] = pouet.account.note;
+      let descData = pouet.account.note.split('<br>').filter(e => e);
+      if(descData.length > 0){
+          for (let line of descData){
+          description[user.name] += '\n' + line;
+        }
+      } else {
+        description[user.name] = 'NO DESCRIPTION'
+      }
    }
  }

  for (const pouet of filtered) {
-    const username = pouet.account.display_name;
-    let infos = idAndDate(pouet.created_at);
+    let selectedPouet;
+    if(pouet.reblog){
+      selectedPouet = pouet.reblog;
+    } else {
+      selectedPouet = pouet;
+    }
+    //console.log(selectedPouet);
+    const username = selectedPouet.account.username;
+    const displayName = selectedPouet.account.display_name;
+    let infos = idAndDate(selectedPouet.created_at);
    let entry;
    //console.log(pouet);
    //ignorer autres que images
-    if (pouet.media_attachments?.length > 0 &&
-        !pouet.media_attachments[0].type.includes('image')) {
+    if (selectedPouet.media_attachments?.length > 0 &&
+        !pouet.media_attachments[0].type.includes('image') &&
+        !pouet.media_attachments[0].type.includes('video')) {
      continue;
    }
    //ignorer réponses
-    if (pouet.in_reply_to_account_id) {
+    if (selectedPouet.in_reply_to_account_id) {
      continue;
    }
    //ignorer exceptions
-    let exception = exceptionKey(username, pouet.content);
+    let exception = exceptionKey(username, selectedPouet.content);
    //console.log(exception)
    if(exception){
      continue;
    }

-    if (pouet.content.includes('http')) {
-      let textInfos = titleAndContent(pouet.content);
+    if (selectedPouet.content.includes('http')) {
+      let textInfos = titleAndContent(selectedPouet.content);
      entry = {
-        id: 'link' + username + infos.id,
+        id: 'link' + displayName + infos.id,
        date: infos.date,
-        dateInfo: pouet.created_at,
+        dateInfo: selectedPouet.created_at,
        type: "link",
-        author: username,
-        caption: textInfos.title + '.liens',
+        author: displayName,
+        caption: textInfos.title + '.plus',
        links: textInfos.links,
        description: textInfos.content,
        isSelected: false
      };
-    } else if (pouet.media_attachments?.length > 0) {
-          let textInfos = titleAndContent(pouet.content);
-          console.log(pouet);
-          entry = {
-            id: 'img' + username + infos.id,
-            date: infos.date,
-            dateInfo: pouet.created_at,
-            type: "image",
-            author: username,
-            caption: textInfos.title + '.star',
-            src: pouet.media_attachments[0].url,
-            alt: pouet.media_attachments[0].description,
-            description: textInfos.content,
-            like: pouet.favourites_count,
-            isSelected: false
+    } else if (selectedPouet.media_attachments?.length > 0) {
+          let textInfos = titleAndContent(selectedPouet.content);
+          //console.log(pouet);
+          if (pouet.media_attachments[0].type.includes('image')){
+              entry = {
+              id: 'img' + displayName + infos.id,
+              date: infos.date,
+              dateInfo: selectedPouet.created_at,
+              type: "image",
+              author: displayName,
+              caption: textInfos.title + '.star',
+              src: selectedPouet.media_attachments[0].url,
+              alt: selectedPouet.media_attachments[0].description,
+              description: textInfos.content,
+              like: selectedPouet.favourites_count,
+              isSelected: false
+            }
+          }
+          if (pouet.media_attachments[0].type.includes('video')){
+              let videoType = videoExt(selectedPouet.media_attachments[0].url)
+              entry = {
+              id: 'vid' + displayName + infos.id,
+              date: infos.date,
+              dateInfo: selectedPouet.created_at,
+              type: "video",
+              format: selectedPouet.media_attachments[0].type + '/' + videoType,
+              author: displayName,
+              caption: textInfos.title + '.move',
+              src: selectedPouet.media_attachments[0].url,
+              alt: selectedPouet.media_attachments[0].description,
+              description: textInfos.content,
+              like: selectedPouet.favourites_count,
+              isSelected: false
+            }
          }
    } else {
-      let textInfos = titleAndContent(pouet.content);
+      let textInfos = titleAndContent(selectedPouet.content);
      entry = {
-        id: 'txt' + username + infos.id,
+        id: 'txt' + displayName + infos.id,
        date: infos.date,
-        dateInfo: pouet.created_at,
+        dateInfo: selectedPouet.created_at,
        type: "text",
-        author: username,
+        author: displayName,
        caption: textInfos.title + '.msg',
        description: textInfos.content,
        isSelected: false
      };
    }
+    //console.log(entry);
    files[username].push(entry);
  }

@@ -21,5 +21,13 @@ export const dataStorage = reactive({
  selectedLink:{
    linksData: [],
    description: ''
+  },
+  selectedVideo: {
+    src: "",
+    caption: "",
+    like: 0,
+    alt: "",
+    format:"",
+    isLiked: false
  }
 })
@@ -71,10 +71,11 @@

  #artistPannel{
    position: fixed;
-    width: 380px;
-    height: 500px;
+    width: 420px;
+    height: 600px;
    top: 16.1px;
    left: 16.1px;
+    z-index: 33;
  }

  #artistContent{
@@ -123,14 +124,15 @@
  .theMatrix{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    grid-auto-rows: 133px;
-    gap: 10px;
+    grid-auto-rows: 150px;
+    gap: 16.1px;
    width: 97%;
    height: 66%;
    overflow-y: auto;
    align-items: center;
    margin-left: 5px;
    margin-top: 5px;
+    padding-top: 10px;
  }

  .itemDesc{
@@ -330,7 +332,7 @@
        rootDepth: 0
      }
    },
-    emits: ['close','focus','openImg','openLink'],
+    emits: ['close','focus','openImg','openLink','openVideo'],
    methods:{
      onDrag({ target, transform }) {
        target.style.transform = transform;
@@ -391,7 +393,19 @@
            caption: e.caption,
            description: e.description
          }
-          //console.log(dataStorage.selectedLink);
+          console.log(dataStorage.selectedLink);
+        }
+        if(e.type === 'video'){
+            this.$emit('openVideo');
+            dataStorage.selectedVideo = {
+              src: e.src,
+              caption: e.caption,
+              like: e.like,
+              alt: e.alt,
+              format: e.format,
+              isLiked: e.isLiked
+            }
+            this.displayedDescription = e.description;
        }

        this.selectFile(e);
@@ -23,10 +23,10 @@
        <div id="contactText">
          <p>Si tu veux nous contacter directement, tu peux:<br>&emsp;- nous envoyer un mail<br>&emsp;- ou un DM sur insta</p>
        </div>
-        <a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+        <a href="mailto:drags-nerds@epickiwi.fr" class="textBtnStyle" @touchstart.stop @mousedown.stop target="_blank">
          E-MAIL
        </a>
-        <a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop>
+        <a href="https://www.instagram.com/drags_nerds/?utm_source=ig_web_button_share_sheet" class="textBtnStyle" @touchstart.stop @mousedown.stop  target="_blank">
          INSTA
        </a>
      </div>
@@ -20,11 +20,14 @@
        </button>
      </div>
      <div class="windowContent">
-          <p>Si tu penses que tu as les moyens<br>de nous faire une petite donation,<br> toute participation est la bienvenue et<br>ça nous aiderait bien à démarrer le projet ^^</p>
+          <p>
+            Aujourd’hui, nous avons besoin<br>d’un coup de pouce pour<br>notre show du 22 mai.<br><br>
+            Cette cagnotte a pour objectif de financer<br>la rémunération des artistes drag et nerd participant·es, de soutenir le travail<br>de l’équipe l’orga, ainsi que d’investir dans le développement de Drags & Nerds<br>afin de vous proposer encore plus d’événements à l’avenir !<br><br>
+            Chaque don compte, vraiment.<br><br>
+            Merci du fond du cœur à tous·tes cell·eux qui prendront le temps de lire, de partager<br>et, bien sûr, de participer !
+          </p>
          <div id="linkRow">
-            <a href="#" class="textBtnStyle">Lydia</a>
-            <a href="#" class="textBtnStyle">Paypal</a>
-            <a href="#" class="textBtnStyle">SumUp</a>
+            <a href="https://pots.lydia.me/collect/pots?id=4298-appel-aux-dons-drags-nerds-2e-edition" class="textBtnStyle" target="_blank" @mousedown.stop @touchstart.stop>Cagnotte Lydia</a>
          </div>
      </div>
    </div>
@@ -76,7 +79,7 @@
  }

  #linkRow .textBtnStyle{
-    width: 27%;
+    width: 77.7%;
    height: 50px;
    margin-bottom: 16.1px;
  }
@@ -8,7 +8,7 @@
 </script>

 <template>
-    <Teleport to="#infoMenuContainer" defer>
+    <Teleport to="#playerContainer" defer>
      <div class="graffContainer" id="TsContainer">
        <TsGraff name="graffTs" class="graff" id="graffTs"/>
        <TsNeon name="neonTs" class="neon" id="neonTs"/>
@@ -63,7 +63,7 @@
  }

  #TsContainer{
-    top: -155%;
+    top: 66px;
    left: 131.2px;
  }
  #graffTs{
@@ -106,17 +106,12 @@
    margin-left: -7.77px;
    margin-top: -7.77px;
  }
-  /*================ TINY PHONE*/
-  @media(max-width:350px){
-    #TsContainer{
-      top: -133%;
-    }
-  }
+
  /*================ PC LARGE*/
  @media(min-width:1300px){
    #TsContainer{
-      top: 50px;
-      left: -144%;
+      top: 55px;
+      left: 300px;
    }
    #graffTs{
      width: 100px;
@@ -15,13 +15,13 @@
          {{selectedLink.caption}}
        </p>
        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
-        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.stop="$emit('close')" data-tooltip="fermer">
          <CloseIcon name="close" class="icon"/>
        </button>
      </div>
      <div class="windowContent" id="linkContent">
        <p id="linkTextStyle">{{selectedLink.description}}</p>
-        <a class="textBtnStyle" v-for="item in selectedLink.linksData" :href="item.url" target="_blank">{{item.caption}}</a>
+        <a class="textBtnStyle" v-for="item in selectedLink.linksData" :href="item.url" target="_blank" @mousedown.stop @touchstart.stop>{{item.caption}}</a>
      </div>
    </div>
 </template>
@@ -104,6 +104,7 @@
    emits: ['close','focus'],
    computed: {
      selectedLink(){
+        //console.log(this.selectedLink);
        return dataStorage.selectedLink
      }
    },
@@ -51,17 +51,19 @@
    position: fixed;
    top:50%;
    left:3.33%;
-    width: 333px;
-    height: 333px;
+    width: 400px;
+    height: 400px;
  }

  #msgContent{
-    width: 100%;
+    width: 95%;
    height: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
+    overflow-y: scroll;
  }
+
  /*================ PC LARGE*/
  @media(min-width:1000px){
    #msgVisualizer{
@@ -80,6 +82,7 @@
    padding-left: 7.77px;
    margin-top: 0;
    height: 77%;
+    pointer-events: all;
    overflow-y: scroll;
  }
 </style>
@@ -0,0 +1,113 @@
+<script setup>
+    import CloseIcon from '../assets/icons/close.svg'
+    import LikeIcon from '../assets/icons/like.svg'
+</script>
+
+<template>
+    <div id="videoPannel" class="windowStyle" ref="videoPannel" @mousedown="$emit('focus')" @touchstart="$emit('focus')">
+      <Moveable
+          className="moveable"
+          :target="target"
+          :draggable="true"
+          @drag="onDrag"
+      />
+      <div class="windowTitle">
+        <p>
+          {{selectedVideo.caption}}
+        </p>
+        <!-- touchstart.capture pour passer en prio sur déplacement fenêtre/ .stop si pas de method-->
+        <button type="button" class="closeBtn" @mousedown.capture="$emit('close')" @touchstart.capture="$emit('close')" data-tooltip="fermer">
+          <CloseIcon name="close" class="icon"/>
+        </button>
+      </div>
+      <div class="windowContent" id="visualizerContent">
+        <video controls id="displayedImgStyle" :src="selectedVideo.src" :type="selectedVideo.format">
+        </video>
+        <div class="reactBar">
+          <p class="reactStatStyle">{{selectedVideo.like}}</p>
+          <button data-tooltip="j'aime bien" type="button" class="iconBtnStyle" :class="{reactedStyle: selectedVideo.isLiked}" @mousedown.capture="likeImg" @touchstart.capture="likeImg">
+            <LikeIcon name="test" class="icon"/>
+          </button>
+        </div>
+      </div>
+    </div>
+</template>
+
+<style scoped>
+  /*================= Mise en page:
+    => Mobile First : par défaut, moins de 500px
+    => Tablette et PC format haut : de 500 à 1000px
+    => PC large : à partir de 1000px
+  */
+
+  /*+++++++++++++++++ COPYBOX
+      ================ PC HAUT/IPAD
+      @media(min-width:650px){}
+      ================ PC LARGE
+      @media(min-width:1300px){}
+  */
+
+  #videoPannel{
+    position: fixed;
+    width: 333px;
+    height: auto;
+    top: 500px;
+    left: 16.1px;
+    border-radius: 16.1px;
+  }
+
+  #videoContent{
+    align-items: flex-start;
+  }
+
+  #displayedImgStyle{
+    width:100%;
+    height:auto;
+    margin: 0;
+    padding: 0;
+  }
+
+  /*================ PC LARGE*/
+  @media(min-width:1300px){
+    #videoPannel{
+      top: 333px;
+      left: 161px;
+    }
+  }
+</style>
+
+<script>
+  import Moveable from 'vue3-moveable';
+  import { dataStorage } from '../dataExchange.js'
+
+  export default {
+    name : 'VideoPannel',
+    components:{
+      Moveable
+    },
+    data(){
+      return{
+        target: null
+      }
+    },
+    emits: ['close','focus'],
+    computed: {
+      selectedVideo(){
+        return dataStorage.selectedVideo
+      }
+    },
+    methods:{
+      onDrag({ target, transform }) {
+        target.style.transform = transform;
+      },
+      likeImg(){
+        this.selectedVideo.isLiked = !this.selectedVideo.isLiked;
+        console.log(this.selectedVideo);
+      }
+    },
+    mounted(){
+      this.target = this.$refs.videoPannel;
+      console.log("Video pannel is loaded!");
+    }
+  };
+</script>
@@ -56,6 +56,7 @@
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
+    z-index: 33;
  }
  #inboxHeader{
    width: 100%;
@@ -42,7 +42,7 @@
          si tu as envie de participer !
          </p>
        <button type="button" class="textBtnStyle" @click="openPannel('follow')">NOUS SUIVRE HORS DES RÉSEAUX!</button>
-        <button type="button" class="textBtnStyle" @click="openPannel('donation')" v-show="false">NOUS FAIRE UNE DONATION</button>
+        <button type="button" class="textBtnStyle" @click="openPannel('donation')">NOUS FAIRE UNE DONATION</button>
        <button type="button" class="textBtnStyle" id="ticketButton" @click="openPannel('ticket')" v-show="false">RÉSERVER MA PLACE!</button>
      </div>
      <div id="btnColumn">
@@ -60,12 +60,13 @@
        </button>
      </div>
    </div>
-    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link'-->
+    <!--'msg' 'insta' 'news' 'contact' 'artist' 'follow' 'visual' 'link' 'follow' 'donation'-->
    <InboxDiv @open="openPannel('msg')"></InboxDiv>
    <ArtistPan
      v-show="isActive.includes('artist')"
      @openImg = "openPannel('visual')"
      @openLink = "openPannel('link')"
+      @openVideo = "openPannel('video')"
      @close="closePannel('artist')"
      @focus="focusPannel('artist')"
      :class="{zBase: isFocused!=='artist', zFocus: isFocused==='artist'}">
@@ -106,6 +107,12 @@
      @focus="focusPannel('visual')"
      :class="{zBase: isFocused!=='visual', zFocus: isFocused==='visual'}">
    </VisualizerPan>
+    <VideoPan
+      v-show="isActive.includes('video')"
+      @close="closePannel('video')"
+      @focus="focusPannel('video')"
+      :class="{zBase: isFocused!=='video', zFocus: isFocused==='video'}">
+    </VideoPan>
    <LinkPan
      v-show="isActive.includes('link')"
      @close="closePannel('link')"
@@ -148,6 +155,7 @@
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
+    z-index: 33;
  }

  #btnColumn{
@@ -22,6 +22,7 @@ import InstaPannel from './indieComponents/InstaPannel.vue'
 import MessagePannel from './indieComponents/MessagePannel.vue'
 import FollowPannel from './indieComponents/FollowPannel.vue'
 import VisualizerPannel from './indieComponents/VisualizerPannel.vue'
+import VideoPannel from './indieComponents/VideoPannel.vue'
 import LinkPannel from './indieComponents/LinkPannel.vue'
 import DonationPannel from './indieComponents/DonationPannel.vue'
 import TicketPannel from './indieComponents/TicketPannel.vue'
@@ -51,6 +52,7 @@ app.component('InstaPan', InstaPannel);
 app.component('MessagePan', MessagePannel);
 app.component('FollowPan', FollowPannel);
 app.component('VisualizerPan', VisualizerPannel);
+app.component('VideoPan', VideoPannel);
 app.component('LinkPan', LinkPannel);
 app.component('DonationPan', DonationPannel);
 app.component('TicketPan', TicketPannel);
@@ -125,7 +125,8 @@
    emits: ['themeDark', 'themeLight'],
    data(){
      return{
-        isChecked: false
+        isChecked: false,
+        target: null
      }
    },
    methods:{
@@ -133,15 +134,18 @@
        if(this.isChecked){
          this.isChecked = false;
          this.$emit('themeLight');
+          this.target.style.filter = 'invert(1) saturate(333%) brightness(93%) hue-rotate(90deg)'
          return document.documentElement.setAttribute("data-theme", "light")
        }else{
          this.isChecked = true;
          this.$emit('themeDark');
+          this.target.style.filter = 'invert(0) saturate(161%) brightness(117%) hue-rotate(1.61deg)'
          return document.documentElement.setAttribute("data-theme", "dark")
        }
      }
    },
-    mounted(){
+    async mounted(){
+      this.target = await document.querySelector('#canvas video');
      console.log("Theme button is loaded!");
    }
  };
@@ -4,7 +4,7 @@

 <template>
    <div id="generatedContainer" ref="generatorContainer">
-    <div class="loadingOverlay" v-show="overlayIsActive"><p id="loadingOText">ça charge...</p></div>
+    <div class="loadingOverlay" v-show="false"><p id="loadingOText">ça charge...</p></div>
      <div class="imgContainer" :id="'div'+item.id" :class="{highlightItem: item.isHighlight===1, highlightMax: item.isHighlight===2}" v-for="item in randomImgList" :key="item.id" :style="{
                                                                                                  left: item.x + 'px',
                                                                                                  top: item.y + 'px'
@@ -52,6 +52,7 @@
    align-items: center;
    justify-content: flex-start;
    padding-top: 13.12px;
+    z-index: 0;
  }

  #playerContainer .iconBtnStyle{
@@ -30,7 +30,7 @@
              <br>
              20h/ Début des shows
              <br>
-              &emsp;&emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
+              &emsp;&emsp; &rarr; &rarr; &rarr; jusqu'à 1h
              </p>
            </time>
          </div>
@@ -38,7 +38,7 @@
            <a href="https://grrrndzero.org/" target="_blank">
              <p><strong>Grrrnd Zero</strong></p>
              <p>60 Avenue de Bohlen</p>
-              <p>69110 Vaux-en-Velin</p>
+              <p>69120 Vaux-en-Velin</p>
            </a>
          </div>
        </div>
@@ -5,15 +5,23 @@ import svgLoader from 'vite-svg-loader'

 // https://vite.dev/config/
 export default defineConfig({
-  base: './',
  plugins: [vue(), svgLoader()],
-  server:{
+  server: {
    host: '0.0.0.0',
-    port:8080
+    port: 8080
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
+  },
+  build: {
+    rollupOptions: {
+      input: {
+        main: path.resolve(import.meta.dirname, 'index.html'),
+        glitcher: path.resolve(import.meta.dirname, 'glitcher/index.html'),
+        cutter: path.resolve(import.meta.dirname, 'cutter/index.html')
+      },
+    },
  }
 })
Author	SHA1	Message	Date
vgaNAR6ta	2cc2862503	edit: insta cutter maintenant ajusté à tous les trucs de merde d'insta x333	2026-05-06 06:09:38 +02:00
vgaNAR6ta	56f1255078	edit: description vide et parsing du texte	2026-04-26 18:39:14 +02:00
vgaNAR6ta	7273e998ae	edit: donations + modif gestion post non-formaté	2026-04-26 16:47:34 +02:00
vgaNAR6ta	11de8e4265	edit: creation du script découpe	2026-04-22 01:22:33 +02:00
vgaNAR6ta	9a2c9bae86	add: nouvelle page /cutter pour découper post insta (juste interface sans script) edit: liens affichés en '.plus'	2026-04-21 21:10:25 +02:00
vgaNAR6ta	43bbc053eb	edit: mise à jour des profils artistes	2026-04-21 21:08:28 +02:00
vgaNAR6ta	ace3588b8c	edit: added missing packages	2026-04-21 02:26:01 +02:00
vgaNAR6ta	c346673bd9	edit: merge conflict solved	2026-04-21 02:00:22 +02:00
vgaNAR6ta	1ec359f546	Merge branch 'vgaNAR6ta' of https://git.labolyon.fr/vgaNAR6ta/drags-and-nerds into vgaNAR6ta	2026-04-21 01:59:10 +02:00
vgaNAR6ta	5507942029	edit: bug fix z-index + video pannel + minor other bugs	2026-04-21 01:56:41 +02:00
epickiwi	13df9c0601	Ajustement pour une interface minimale	2026-04-21 01:50:53 +02:00
epickiwi	4a1c77121b	Ajout du noise	2026-04-21 01:08:11 +02:00
epickiwi	3d5bef4153	Ajout d'entités "glitch" a la scene	2026-04-20 23:11:05 +02:00
epickiwi	f1229866d1	Creation de la base du glitcher	2026-04-20 19:00:08 +02:00
vgaNAR6ta	72a96a7d6c	edit: lien contact vers nouvel onglet	2026-04-20 17:45:00 +02:00
epickiwi	c10ce7e8d7	Fix vidéo	2026-04-20 16:16:22 +02:00
vgaNAR6ta	f9d65f2d46	edit: intégration video mastodon + bug fix liens	2026-04-18 16:39:45 +02:00
vgaNAR6ta	d77bbdbb41	edit: code postal de vaux	2026-04-09 17:24:14 +02:00
vgaNAR6ta	e9b4b79eff	edit : gestion du ptn de REBLOG aaaaah xD	2026-04-09 17:13:18 +02:00
vgaNAR6ta	823b723a43	edit: bug dans la lecture des msg de l'orga de mastodon + réglages avant prod	2026-04-09 03:55:00 +02:00
vgaNAR6ta	275fd74ca9	edit: position logo ts + correction z-index, filtrage par username, gamme colorée adaptée + changement du fond avec le thème	2026-04-08 05:32:16 +02:00
vgaNAR6ta	195fd10424	Merge pull request 'Optimisation de l'arrière plan' (#1 ) from epickiwi/drags-and-nerds:opti-background into vgaNAR6ta Reviewed-on: #1	2026-04-08 00:43:03 +02:00
epickiwi	914061eb92	Removed screenshot	2026-04-07 23:33:02 +02:00
epickiwi	958c5ca8dd	Added video and noise	2026-04-07 23:30:50 +02:00