CHRRMNN \\u2014 Art Director \/ Designer<\/title>\\n<style>\\n :root {\\n \/* Farbe der Abdeckung, die die dahinterliegende Website zun\\u00e4chst verh\\u00fcllt.\\n Beliebig anpassbar. Wird vom Skript ausgelesen und auf die Canvas gemalt. *\/\\n --cover: #131313;\\n }\\n\\n \/* Eigene Schrift. Lege die Font-Datei(en) neben diese HTML-Datei bzw. passe\\n die Pfade im src an (z. B. auf deinen \/fonts-Ordner beim Einbetten). *\/\\n @font-face {\\n font-family: 'PPNeueMontreal-Regular';\\n font-weight: 400;\\n font-style: normal;\\n font-display: swap;\\n }\\n\\n * { box-sizing: border-box; }\\n\\n html, body {\\n margin: 0;\\n padding: 0;\\n \/* KEIN eigener Hintergrund: alles au\\u00dferhalb dieses Elements bleibt\\n transparent, damit die darunterliegende Website durchscheinen kann.\\n Beim Einbetten in eine bestehende Seite deshalb wichtig. *\/\\n background: transparent;\\n font-family: 'PPNeueMontreal-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;\\n }\\n\\n \/* Scroll-Strecke: gibt dem Effekt Raum zum Ablaufen.\\n H\\u00f6he bestimmt, wie \\\"lang\\\" man scrollen muss. *\/\\n .hero-scroll {\\n position: relative;\\n height: 200vh;\\n }\\n\\n \/* Der eigentlich sichtbare Bereich bleibt beim Scrollen stehen (sticky). *\/\\n .hero-sticky {\\n position: sticky;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100vh;\\n overflow: hidden;\\n \/* Transparent \\u2013 die undurchsichtige Abdeckung kommt allein aus der Canvas.\\n Die per destination-out ausgestanzten Textbereiche werden echt\\n transparent und geben den Blick auf das frei, was unter diesem\\n Element liegt. *\/\\n background: transparent;\\n }\\n\\n \/* Die Canvas ersetzt das fr\\u00fchere SVG samt Maske. Sie liegt pixelgenau \\u00fcber\\n dem Viewport; der Effekt wird komplett in 2D-Canvas gerendert. *\/\\n .hero-canvas {\\n display: block;\\n width: 100%;\\n height: 100%;\\n }\\n\\n \/* Fallback-Content f\\u00fcr Screenreader \/ SEO, visuell ausgeblendet,\\n da der eigentliche Text als Ausstanzung auf der Canvas gerendert wird. *\/\\n .sr-only {\\n position: absolute;\\n width: 1px; height: 1px;\\n padding: 0; margin: -1px;\\n overflow: hidden;\\n clip: rect(0,0,0,0);\\n white-space: nowrap;\\n border: 0;\\n }\\n\\n @media (prefers-reduced-motion: reduce) {\\n .hero-scroll { height: 100vh; }\\n }\\n<\/style>\\n<\/head>\\n<body>\\n\\n<h1 class=\\\"sr-only\\\">CHRRMNN \\u2014 Art Director, Designer<\/h1>\\n\\n<section class=\\\"hero-scroll\\\" id=\\\"heroScroll\\\">\\n <div class=\\\"hero-sticky\\\">\\n <canvas class=\\\"hero-canvas\\\" id=\\\"heroCanvas\\\"><\/canvas>\\n <\/div>\\n<\/section>\\n\\n<script>\\n(function () {\\n \/* =====================================================================\\n WARUM CANVAS STATT SVG-MASKE?\\n ---------------------------------------------------------------------\\n Die vorherige Fassung stanzte den Text \\u00fcber eine SVG-<mask> aus einem\\n bildschirmf\\u00fcllenden <rect>. Das Problem: eine SVG-Maske ist NICHT\\n compositor-\/GPU-beschleunigt. Sobald sich der Maskeninhalt \\u00e4ndert \\u2013\\n und hier \\u00e4ndert er sich in JEDEM Animations-Frame (Skalierung +\\n wachsende stroke-width) \\u2013 muss der Browser die komplette Maske \\u00fcber die\\n GESAMTE Viewport-Fl\\u00e4che neu rastern. Diese Kosten wachsen mit\\n Breite \\u00d7 H\\u00f6he. Auf 4K\/Ultrawide-Fenstern wird genau das zum Flaschenhals.\\n\\n Canvas + globalCompositeOperation='destination-out' erledigt denselben\\n Effekt (echte L\\u00f6cher, die die Host-Seite durchscheinen lassen), aber mit\\n GPU-freundlichen fill\/Text-Operationen. Pro Frame nur: 1\\u00d7 Fl\\u00e4che f\\u00fcllen\\n und 3 kurze Textzeilen zeichnen \\u2013 unabh\\u00e4ngig von der Maskenkomplexit\\u00e4t\\n und um ein Vielfaches billiger als das SVG-Masken-Re-Rastering.\\n\\n Zus\\u00e4tzliche Absicherung f\\u00fcr sehr gro\\u00dfe Fenster: der Canvas-Backing-Store\\n wird \\u00fcber MAX_DPR gedeckelt (siehe unten), damit die Pixelanzahl auf\\n Retina-4K nicht explodiert.\\n ===================================================================== *\/\\n\\n const canvas = document.getElementById('heroCanvas');\\n const ctx = canvas.getContext('2d');\\n const wrapper = document.getElementById('heroScroll');\\n\\n const LINES = ['LET\\u2019S', 'CREATE'];\\n const FONT_STACK = '\\\"PPNeueMontreal-Regular\\\", \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif';\\n\\n \/\/ Abdeckungsfarbe aus der CSS-Variable lesen (bleibt zentral anpassbar).\\n const COVER = (getComputedStyle(document.documentElement)\\n .getPropertyValue('--cover').trim()) || '#131313';\\n\\n \/\/ Separater Mess-Kontext, damit die Transform-Matrix des Zeichen-Kontexts\\n \/\/ beim Vermessen der Textbreite unber\\u00fchrt bleibt.\\n const measureCanvas = document.createElement('canvas');\\n const measureCtx = measureCanvas.getContext('2d');\\n\\n let vw = 0, vh = 0, dpr = 1;\\n let baseFontSize = 60; \/\/ Gr\\u00f6\\u00dfe bei Scroll-Progress 0 (\\\"ART DIRECTOR\\\" f\\u00fcllt die Breite)\\n let baseLineHeight = 60;\\n let baseStartY = 0;\\n let centerX = 0, centerY = 0;\\n let lineY = []; \/\/ gecachte Y-Mitten der drei Zeilen\\n let wrapperTop = 0;\\n let totalScrollable = 0;\\n\\n const WIDTH_PADDING = 0.5\\n const HEIGHT_PADDING = 0.5; \/\/ Anteil der Viewport-H\\u00f6he f\\u00fcr den 3-Zeilen-Block bei Progress 0\\n const LINE_HEIGHT_FACTOR = 0.9\\n\\n \/\/ Wie stark die Schrift beim Scrollen w\\u00e4chst und dicker wird \\u2013 f\\u00fcr alle\\n \/\/ drei Zeilen einheitlich und synchron, kein Zeitversatz zwischen ihnen.\\n const GROWTH_FACTOR = 8;\\n const STROKE_FACTOR = 2;\\n\\n \/\/ Easing: Fortschritt wird potenziert \\u2192 langsamer Start, Beschleunigung\\n \/\/ zum Ende hin (ease-in).\\n const EASE_POWER = 2.2;\\n\\n \/\/ Backing-Store-Aufl\\u00f6sung deckeln. Auf Retina-4K w\\u00e4re devicePixelRatio 2\\u20133\\n \/\/ und die Canvas m\\u00fcsste z. B. 7680\\u00d74320 Pixel pro Frame bef\\u00fcllen. Ein Cap\\n \/\/ bei 2 h\\u00e4lt die Pixellast beherrschbar, ohne dass die riesigen Buchstaben\\n \/\/ sichtbar an Sch\\u00e4rfe verlieren.\\n const MAX_DPR = 2;\\n\\n function easeInProgress(p) {\\n return Math.pow(p, EASE_POWER);\\n }\\n\\n \/\/ ---- Feder-Physik: Ziel-Werte werden nicht 1:1 an den Scroll gekoppelt,\\n \/\/ sondern laufen einer Feder sanft hinterher (niedrige STIFFNESS + hohe\\n \/\/ DAMPING = weiches Nachziehen mit nur minimalem \\u00dcberschwingen).\\n const SPRING_STIFFNESS = 0.1;\\n const SPRING_DAMPING = 0.7;\\n const SPRING_EPSILON = 0.0008; \/\/ Schwelle, ab der eine Feder als \\\"eingeschwungen\\\" gilt\\n\\n function createSpring(initial) {\\n return { value: initial, velocity: 0, target: initial };\\n }\\n\\n function stepSpring(spring) {\\n const force = (spring.target - spring.value) * SPRING_STIFFNESS;\\n spring.velocity = (spring.velocity + force) * SPRING_DAMPING;\\n spring.value += spring.velocity;\\n return Math.abs(spring.target - spring.value) < SPRING_EPSILON &&\\n Math.abs(spring.velocity) < SPRING_EPSILON;\\n }\\n\\n \/\/ EINE Feder f\\u00fcr die Text-Skalierung, EINE f\\u00fcr die Strichbreite\\n \/\/ (gelten f\\u00fcr alle drei Zeilen gemeinsam).\\n const scaleSpring = createSpring(1);\\n const strokeSpring = createSpring(0);\\n\\n let currentProgress = 0;\\n let ticking = false;\\n let loopRunning = false;\\n\\n function computeLayout() {\\n vw = window.innerWidth;\\n vh = window.innerHeight;\\n dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\\n\\n \/\/ Backing-Store in Ger\\u00e4tepixeln, CSS-Gr\\u00f6\\u00dfe in Layoutpixeln.\\n \/\/ Achtung: das Setzen von canvas.width\/height SETZT DEN KONTEXT ZUR\\u00dcCK \\u2013\\n \/\/ deshalb werden die statischen ctx-Eigenschaften direkt danach neu gesetzt.\\n canvas.width = Math.round(vw * dpr);\\n canvas.height = Math.round(vh * dpr);\\n canvas.style.width = vw + 'px';\\n canvas.style.height = vh + 'px';\\n\\n \/\/ Referenzgr\\u00f6\\u00dfe messen (einmal pro Layout, nicht pro Frame).\\n const REF = 100;\\n measureCtx.font = '400 ' + REF + 'px ' + FONT_STACK;\\n let maxWidth = 0;\\n for (let i = 0; i < LINES.length; i++) {\\n const w = measureCtx.measureText(LINES[i]).width;\\n if (w > maxWidth) maxWidth = w;\\n }\\n\\n const availW = vw * WIDTH_PADDING;\\n baseFontSize = REF * (availW \/ maxWidth);\\n\\n baseLineHeight = baseFontSize * LINE_HEIGHT_FACTOR;\\n let totalHeight = baseLineHeight * LINES.length;\\n const availH = vh * HEIGHT_PADDING;\\n\\n if (totalHeight > availH) {\\n const scale = availH \/ totalHeight;\\n baseFontSize *= scale;\\n baseLineHeight = baseFontSize * LINE_HEIGHT_FACTOR;\\n totalHeight = baseLineHeight * LINES.length;\\n }\\n\\n baseStartY = (vh - totalHeight) \/ 2;\\n centerX = vw \/ 2;\\n centerY = baseStartY + totalHeight \/ 2;\\n\\n \/\/ Y-Mitten der Zeilen einmalig cachen.\\n lineY = [];\\n for (let i = 0; i < LINES.length; i++) {\\n lineY.push(baseStartY + baseLineHeight * i + baseLineHeight \/ 2);\\n }\\n\\n \/\/ Statische Zeichen-Eigenschaften EINMAL setzen (\\u00fcberleben die Frames, da\\n \/\/ fillRect\/clearRect\/setTransform den restlichen Kontext-State nicht\\n \/\/ zur\\u00fccksetzen). Pro Frame \\u00e4ndern sich nur Transform, lineWidth,\\n \/\/ Composite-Modus und fillStyle.\\n ctx.font = '400 ' + baseFontSize + 'px ' + FONT_STACK;\\n ctx.textAlign = 'center';\\n ctx.textBaseline = 'middle';\\n ctx.lineJoin = 'round';\\n ctx.lineCap = 'round';\\n\\n \/\/ Scroll-Geometrie einmalig cachen (bei Layout\/Resize) \\u2013 dadurch l\\u00f6st der\\n \/\/ Scroll-Handler selbst KEINE Layout-Reads (getBoundingClientRect etc.)\\n \/\/ mehr aus, sondern rechnet nur noch mit gecachten Zahlen.\\n wrapperTop = wrapper.offsetTop;\\n totalScrollable = wrapper.offsetHeight - vh;\\n\\n updateTargets(currentProgress);\\n draw(); \/\/ Canvas wurde durch die Gr\\u00f6\\u00dfen\\u00e4nderung geleert \\u2192 einmal neu zeichnen\\n startLoopIfNeeded();\\n }\\n\\n \/\/ Setzt die ZIEL-Werte der Federn (die weiche Ann\\u00e4herung passiert im rAF-Loop).\\n function updateTargets(progress) {\\n currentProgress = progress;\\n const eased = easeInProgress(progress);\\n scaleSpring.target = 1 + eased * GROWTH_FACTOR;\\n strokeSpring.target = eased * baseFontSize * STROKE_FACTOR;\\n }\\n\\n \/\/ Ein Frame zeichnen: Abdeckung f\\u00fcllen, dann Text ausstanzen.\\n function draw() {\\n const s = scaleSpring.value;\\n const strokeWidth = Math.max(0, strokeSpring.value);\\n\\n \/\/ Basis-Transform inkl. DPR; Matrix wird jeden Frame komplett neu gesetzt,\\n \/\/ damit sich die anschlie\\u00dfenden translate\/scale nicht akkumulieren.\\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\\n ctx.clearRect(0, 0, vw, vh);\\n\\n \/\/ 1) Undurchsichtige Abdeckung \\u00fcber den gesamten Viewport.\\n ctx.globalCompositeOperation = 'source-over';\\n ctx.fillStyle = COVER;\\n ctx.fillRect(0, 0, vw, vh);\\n\\n \/\/ 2) Text als L\\u00f6cher ausstanzen \\u2192 echte Transparenz zur Host-Seite darunter.\\n \/\/ Uniformes scale() um die Blockmitte: alle L\\u00f6cher wachsen synchron.\\n \/\/ Der Kontext-Scale multipliziert auch die lineWidth \\u2013 genau wie zuvor\\n \/\/ die group-transform die stroke-width mitskaliert hat.\\n ctx.globalCompositeOperation = 'destination-out';\\n ctx.translate(centerX, centerY);\\n ctx.scale(s, s);\\n ctx.translate(-centerX, -centerY);\\n\\n ctx.lineWidth = strokeWidth;\\n for (let i = 0; i < LINES.length; i++) {\\n if (strokeWidth > 0) ctx.strokeText(LINES[i], centerX, lineY[i]);\\n ctx.fillText(LINES[i], centerX, lineY[i]);\\n }\\n }\\n\\n \/\/ rAF-Loop: integriert die Federn und zeichnet. L\\u00e4uft NUR, solange sich\\n \/\/ mindestens eine Feder noch bewegt \\u2013 kein dauerhafter Leerlauf-Loop, die\\n \/\/ Canvas bleibt im Ruhezustand einfach unver\\u00e4ndert stehen.\\n function tick() {\\n const scaleSettled = stepSpring(scaleSpring);\\n const strokeSettled = stepSpring(strokeSpring);\\n draw();\\n if (scaleSettled && strokeSettled) {\\n loopRunning = false;\\n return; \/\/ Loop stoppen, sobald alles zur Ruhe gekommen ist\\n }\\n requestAnimationFrame(tick);\\n }\\n\\n function startLoopIfNeeded() {\\n if (!loopRunning) {\\n loopRunning = true;\\n requestAnimationFrame(tick);\\n }\\n }\\n\\n function onScroll() {\\n if (ticking) return;\\n ticking = true;\\n requestAnimationFrame(function () {\\n \/\/ Reine Arithmetik mit gecachten Werten (wrapperTop\/totalScrollable) \\u2013\\n \/\/ kein Layout-Read pro Scroll-Event, das erzwungene Reflows vermeidet.\\n const scrolled = window.scrollY - wrapperTop;\\n let progress = totalScrollable > 0 ? scrolled \/ totalScrollable : 0;\\n progress = Math.min(Math.max(progress, 0), 1);\\n updateTargets(progress);\\n startLoopIfNeeded();\\n ticking = false;\\n });\\n }\\n\\n let resizeTimeout = null;\\n function onResize() {\\n \/\/ Debounce: computeLayout() ist vergleichsweise teuer (misst Text neu,\\n \/\/ reallokiert den Canvas-Backing-Store), soll aber nicht bei jedem\\n \/\/ einzelnen Resize-Event w\\u00e4hrend des Ziehens am Fenster laufen.\\n clearTimeout(resizeTimeout);\\n resizeTimeout = setTimeout(computeLayout, 120);\\n }\\n\\n window.addEventListener('scroll', onScroll, { passive: true });\\n window.addEventListener('resize', onResize);\\n\\n computeLayout();\\n\\n \/\/ Wenn die Web-Schrift asynchron nachl\\u00e4dt, ist die zuerst gemessene\\n \/\/ Textbreite noch die der Ersatzschrift. Sobald PPNeueMontreal-Regular\\n \/\/ bereit ist, einmal neu vermessen, damit die Gr\\u00f6\\u00dfe exakt sitzt.\\n if (document.fonts && document.fonts.ready) {\\n document.fonts.load('400 60px \\\"PPNeueMontreal-Regular\\\"').catch(function () {});\\n document.fonts.ready.then(computeLayout);\\n }\\n})();\\n<\/script>\\n\\n<\/body>\\n<\/html>\",\"frameOverflow\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":1,\"row\":0,\"spaceabove\":0,\"spacebelow\":0,\"type\":\"html\",\"yvel\":1,\"zIndex\":11,\"classes\":\"pointer-none\"},{\"absolute_position\":true,\"align\":\"top\",\"col\":0,\"colspan\":12,\"cont\":\"\",\"customInlineStyle\":\"top: 3vw;\\nmix-blend-mode: difference\",\"margin\":{\"bottom\":3,\"bottomMu\":\"%\",\"left\":3,\"leftMu\":\"%\",\"right\":3,\"rightMu\":\"%\",\"syncLeftRight\":true,\"syncTopBottom\":true,\"top\":3,\"topMu\":\"%\"},\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":5,\"row\":0,\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":20,\"type\":\"text\",\"yvel\":1,\"zIndex\":12},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1770,\"col\":1,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":1,\"relid\":6,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":1,\"attid\":1127,\"col\":2,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2021\/03\/cf-color-02.svg\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsDraggable\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":172,\"offsetx\":0,\"offsety\":0,\"push\":2,\"relid\":10,\"row\":0,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2021\/03\/cf-color-02.svg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":172,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1691,\"col\":2,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":2,\"relid\":17,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"top\",\"alt\":\"\",\"ar\":2.02288329519450815752179551054723560810089111328125,\"attid\":1666,\"col\":3,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1768,\"offsetx\":0,\"offsety\":0,\"push\":3,\"relid\":14,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3-265x536.png\",\"_512\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3-512x1036.png\",\"_768\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3-768x1554.png\",\"full\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":874,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1690,\"col\":4,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":4,\"relid\":16,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":1,\"attid\":1128,\"col\":5,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2021\/03\/cf-color-03.svg\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsDraggable\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":172,\"offsetx\":0,\"offsety\":0,\"push\":5,\"relid\":8,\"row\":0,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2021\/03\/cf-color-03.svg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":172,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":1,\"attid\":1126,\"col\":7,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2021\/03\/cf-color-01.svg\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":172,\"offsetx\":0,\"offsety\":0,\"push\":7,\"relid\":7,\"row\":0,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2021\/03\/cf-color-01.svg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":172,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.02288329519450815752179551054723560810089111328125,\"attid\":1658,\"col\":7,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1768,\"offsetx\":0,\"offsety\":0,\"push\":7,\"relid\":13,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1-265x536.png\",\"_512\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1-512x1036.png\",\"_768\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1-768x1554.png\",\"full\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":874,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"top\",\"alt\":\"\",\"ar\":1.306382978723404253429407617659308016300201416015625,\"attid\":1653,\"col\":7,\"colspan\":4,\"cont\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":2763,\"offsetx\":0,\"offsety\":0,\"push\":7,\"relid\":12,\"row\":0,\"sizes\":{\"_1024\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-1024x1338.png\",\"_1280\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-1280x1672.png\",\"_1920\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-1920x2508.png\",\"_265\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-265x346.png\",\"_512\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-512x669.png\",\"_768\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-768x1003.png\",\"full\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"textOnElement\":{\"bottomCenter\":\"\",\"bottomLeft\":\"\",\"bottomRight\":\"\",\"centerCenter\":\"\",\"darkGradientAtBottom\":false,\"darkGradientAtBottomColor\":\"#000000\",\"darkGradientAtTop\":false,\"darkGradientAtTopColor\":\"#000000\",\"enableSpacePhone\":false,\"enabled\":false,\"leftCenter\":\"\",\"mixBlendModeDifference\":false,\"rightCenter\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"topCenter\":\"\",\"topLeft\":\"\",\"topRight\":\"\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\"},\"type\":\"img\",\"w\":2115,\"yvel\":1,\"frameOverflow\":\"\",\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":2.02288329519450815752179551054723560810089111328125,\"attid\":1655,\"col\":8,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1768,\"offsetx\":0,\"offsety\":0,\"push\":8,\"relid\":11,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2-265x536.png\",\"_512\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2-512x1036.png\",\"_768\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2-768x1554.png\",\"full\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":874,\"yvel\":1,\"textOnElement\":{\"enabled\":false,\"topLeft\":\"\",\"topCenter\":\"\",\"topRight\":\"\",\"leftCenter\":\"\",\"centerCenter\":\"\",\"rightCenter\":\"\",\"bottomLeft\":\"\",\"bottomCenter\":\"\",\"bottomRight\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"enableSpacePhone\":false,\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\",\"darkGradientAtTop\":false,\"darkGradientAtBottom\":false,\"darkGradientAtTopColor\":\"#000000\",\"darkGradientAtBottomColor\":\"#000000\",\"mixBlendModeDifference\":false},\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1688,\"col\":9,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":9,\"relid\":15,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":false,\"align\":\"top\",\"alt\":\"\",\"ar\":0.6796666666666666412055519685964100062847137451171875,\"attid\":1347,\"classes\":\"portrait\",\"col\":0,\"colspan\":6,\"cont\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn.jpg\",\"enableDragPhysicsAutoFloat\":true,\"fixedHeight\":{\"enableFixedHeight\":true,\"height\":\"100svh\",\"objectFit\":\"cover\",\"objectPosition\":\"center center\"},\"frameOverflow\":\"left\",\"h\":2039,\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":28,\"row\":1,\"sizes\":{\"_1024\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-1024x696.jpg\",\"_1280\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-1280x870.jpg\",\"_1920\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-1920x1305.jpg\",\"_2560\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-2560x1740.jpg\",\"_265\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-265x180.jpg\",\"_512\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-512x348.jpg\",\"_768\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-768x522.jpg\",\"full\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn.jpg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":\"0\",\"textOnElement\":{\"bottomCenter\":\"\",\"bottomLeft\":\"\",\"bottomRight\":\"\",\"centerCenter\":\"\",\"darkGradientAtBottom\":false,\"darkGradientAtBottomColor\":\"#000000\",\"darkGradientAtTop\":false,\"darkGradientAtTopColor\":\"#000000\",\"enableSpacePhone\":false,\"enabled\":false,\"leftCenter\":\"\",\"mixBlendModeDifference\":false,\"rightCenter\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"topCenter\":\"\",\"topLeft\":\"\",\"topRight\":\"\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\"},\"type\":\"img\",\"w\":3000,\"yvel\":1,\"zIndex\":3},{\"absolute_position\":false,\"align\":\"top\",\"col\":6,\"colspan\":6,\"cont\":[{\"absolute_position\":false,\"align\":\"top\",\"classes\":\"marquee-full-width responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"config\":{\"alignment\":\"middle\",\"backgroundColor\":\"\",\"borderBottomWidth\":\"0\",\"borderColor\":\"#000000\",\"borderTopWidth\":\"0\",\"desktop\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"elements\":[{\"cont\":\"Web<\/p>\",\"type\":\"text\"},{\"cont\":\"UX\/UI<\/p>\",\"type\":\"text\"},{\"cont\":\"Print<\/p>\",\"type\":\"text\"},{\"cont\":\"Packaging<\/p>\",\"type\":\"text\"},{\"cont\":\"Editorial<\/p>\",\"type\":\"text\"}],\"pauseonhover\":false,\"phone\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"reversedirection\":false,\"separator\":\"\",\"speed\":120,\"startonhover\":false,\"startonscreen\":true,\"tablet\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"textformat\":\"Big\"},\"cont\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":22,\"row\":0,\"spaceabove\":0,\"spacebelow\":0,\"type\":\"marquee\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"top\",\"classes\":\"responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"cont\":\"I CREATE Visual BRAND IdentitIES<\/p>\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"pxwidth\":null,\"relid\":23,\"row\":1,\"spaceabove\":0,\"spaceaboveMu\":\"%\",\"spacebelow\":0,\"spacebelowMu\":\"%\",\"spaceleft\":3,\"spaceleftMu\":\"%\",\"spaceright\":3,\"spacerightMu\":\"%\",\"syncPaddingLeftRight\":true,\"syncPaddingTopBottom\":true,\"type\":\"text\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"middle\",\"classes\":\"responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"cont\":\"I like to support large companies as well as small start-ups and attach great importance to well thought-out, holistic concepts with high design quality for all projects. In doing so, I focus more on con\\u00adtem\\u00ad\\u00adporary sustain\\u00adability than on temporary trends. A long and co\\u00adoperative relation\\u00adship with my clients is as important to me as efficient project management. I know my professional limits and I like to exceed them \\u2013 with the support of experts from my net\\u00adwork and in\\u00a0co\\u00adope\\u00ad\\u00adration with teams of clients or agencies. There is surely more to tell about me and the way I work, but this is best done in a personal conversation.<\/span><\/p>\",\"customInlineStyle\":\"border: 1px 0;\\nborder-color: black\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"pxwidth\":null,\"relid\":24,\"row\":2,\"spaceabove\":0,\"spacebelow\":0,\"spaceleft\":3,\"spaceleftMu\":\"%\",\"spaceright\":3,\"spacerightMu\":\"%\",\"type\":\"text\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"bottom\",\"classes\":\"responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"cont\":\"<a class=\\\"laybutton2 laybutton\\\" rel=\\\"noopener\\\" href=\\\"mailto:hello@chrrmnn.com\\\" target=\\\"_blank\\\">Say hello<\/a><\/p>\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":25,\"row\":3,\"spaceabove\":0,\"spacebelow\":1,\"spaceleft\":3,\"spaceleftMu\":\"%\",\"spaceright\":3,\"spacerightMu\":\"%\",\"type\":\"text\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"middle\",\"classes\":\"tabelle\",\"col\":0,\"colspan\":6,\"config\":{\"columnWidths\":[{\"unit\":\"%\",\"value\":10},{\"unit\":\"%\",\"value\":\"auto\"}],\"cont\":[[{\"cont\":\"\",\"type\":\"text\"},{\"cont\":\"\",\"type\":\"text\"}],[{\"cont\":\"\",\"type\":\"text\"},{\"cont\":\"\",\"type\":\"text\"}],[{\"cont\":\"\",\"type\":\"text\"},{\"cont\":\"\",\"type\":\"text\"}]],\"tableConfig\":{\"backgroundColor\":\"#ffffff\",\"borderColor\":\"#000000\",\"borderWidth\":1,\"bordered\":true,\"cellPaddingLeftRight\":0,\"cellPaddingTopBottom\":8,\"colNumber\":2,\"forceTextAlignment\":false,\"forceTextColor\":false,\"forceTextFormat\":false,\"minHeight\":40,\"nightMode\":false,\"rowNumber\":3,\"showFirstLastHorizontalBorders\":true,\"showFirstLastVerticalBorders\":true,\"showHorizontalBorders\":true,\"showVerticalBorders\":false,\"textAlignment\":\"left\",\"textColor\":\"#000000\",\"textformat\":\"Default\",\"useBackgroundColor\":false,\"verticalTextAlignment\":\"center\"}},\"cont\":\"\",\"customInlineStyle\":\"padding: 0 3vw\",\"frameOverflow\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":4,\"row\":4,\"spaceabove\":0,\"spaceaboveMu\":\"px\",\"spacebelow\":0,\"spacebelowMu\":\"px\",\"spaceleft\":0,\"spaceleftMu\":\"px\",\"spaceright\":0,\"spacerightMu\":\"px\",\"syncPaddingLeftRight\":true,\"syncPaddingTopBottom\":true,\"type\":\"table\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"middle\",\"classes\":\"marquee-full-width\",\"col\":0,\"colspan\":6,\"config\":{\"alignment\":\"middle\",\"backgroundColor\":\"\",\"borderBottomWidth\":\"0\",\"borderColor\":\"#000000\",\"borderTopWidth\":\"0\",\"desktop\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"elements\":[{\"cont\":\"Beyond Build<\/p>\",\"type\":\"text\"},{\"cont\":\"Bendesk<\/p>\",\"type\":\"text\"},{\"cont\":\"olive joy<\/p>\",\"type\":\"text\"},{\"cont\":\"reverse.fashion<\/p>\",\"type\":\"text\"},{\"cont\":\"Ableton<\/p>\",\"type\":\"text\"},{\"cont\":\"BO Berlin Organics<\/p>\",\"type\":\"text\"},{\"cont\":\"Scalara<\/p>\",\"type\":\"text\"},{\"cont\":\"Embassy of Canada<\/p>\",\"type\":\"text\"},{\"cont\":\"Builtech<\/p>\",\"type\":\"text\"},{\"cont\":\"Zalando<\/p>\",\"type\":\"text\"},{\"cont\":\"Tree of Tea<\/p>\",\"type\":\"text\"},{\"cont\":\"circular.fashion<\/p>\",\"type\":\"text\"},{\"cont\":\"mymuesli<\/p>\",\"type\":\"text\"},{\"cont\":\"WeAr Global Magazine<\/p>\",\"type\":\"text\"},{\"cont\":\"Wrangler Footwear<\/p>\",\"type\":\"text\"}],\"pauseonhover\":false,\"phone\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"reversedirection\":false,\"separator\":\"\",\"speed\":120,\"startonhover\":false,\"startonscreen\":true,\"tablet\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"textformat\":\"Big\"},\"cont\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":27,\"row\":5,\"spaceabove\":0,\"spacebelow\":0,\"type\":\"marquee\",\"yvel\":1}],\"html_id\":\"information\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":21,\"row\":1,\"spaceabove\":3,\"spaceaboveMu\":\"%\",\"spacebelow\":3,\"spacebelowMu\":\"%\",\"spaceleft\":0,\"spaceleftMu\":\"%\",\"spaceright\":0,\"spacerightMu\":\"px\",\"stackRowDistribution\":\"start\",\"stackRowGutter\":80,\"stackRowGutterMu\":\"px\",\"stickytop\":null,\"syncPaddingLeftRight\":false,\"type\":\"stack\",\"yvel\":1,\"zIndex\":4},{\"absolute_position\":false,\"align\":\"middle\",\"col\":0,\"colspan\":12,\"config\":{\"allFilterText\":\"All\",\"cat_id\":1,\"dateOrder\":\"DESC\",\"deselect_tags\":true,\"desktop\":{\"colCount\":4,\"colGutter\":3,\"colGutterMu\":\"%\",\"customAspectRatio\":false,\"customAspectRatioH\":9,\"customAspectRatioObjectPosition\":\"center center\",\"customAspectRatioW\":16,\"rowGutter\":3,\"rowGutterMu\":\"%\",\"rowsToShow\":3},\"layoutType\":\"masonry\",\"limitThumbnails\":0,\"moreButtonAlignment\":\"center\",\"moreButtonSpaceTop\":20,\"moreButtonText\":\"Load More\",\"onlyShowVisibleTagFilters\":false,\"phone\":{\"colCount\":2,\"colGutter\":4,\"colGutterMu\":\"%\",\"customAspectRatio\":false,\"customAspectRatioH\":9,\"customAspectRatioObjectPosition\":\"center center\",\"customAspectRatioW\":16,\"rowGutter\":8,\"rowGutterMu\":\"%\",\"rowsToShow\":6},\"randomorder\":false,\"reorder_tags\":true,\"roundedCorners\":16,\"showAllFilter\":true,\"showAllProjects\":false,\"showMoreButton\":false,\"showMoreButtonStyle\":\"laybutton1\",\"showfilter\":false,\"showtagfilter\":true,\"singleTagSelectable\":false,\"sortbycustom\":true,\"sortbydate\":false,\"sortbymenuorder\":false,\"sortbyname\":false,\"sortedFilters\":[{\"name\":\"Work\",\"term_id\":1,\"visible\":true}],\"sortedTagFilters\":false,\"tablet\":{\"colCount\":3,\"colGutter\":3,\"colGutterMu\":\"%\",\"customAspectRatio\":false,\"customAspectRatioH\":9,\"customAspectRatioObjectPosition\":\"center center\",\"customAspectRatioW\":16,\"rowGutter\":5,\"rowGutterMu\":\"%\",\"rowsToShow\":3},\"tagFilterBehaviour\":\"or\"},\"cont\":\"\",\"customInlineStyle\":\"padding: 0 3vw\",\"frameOverflow\":\"\",\"margin\":{\"bottom\":6,\"bottomMu\":\"%\",\"left\":0,\"leftMu\":\"px\",\"right\":0,\"rightMu\":\"px\",\"syncTopBottom\":true,\"top\":6,\"topMu\":\"%\"},\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":2,\"row\":2,\"scrollAnimation\":{\"enableScrollAnimation\":true,\"presetName\":\"Slide Up (Trigger & Play)\",\"syncWithNavAnim\":false},\"spaceabove\":0,\"spaceaboveMu\":\"%\",\"spacebelow\":0,\"spacebelowMu\":\"%\",\"spaceleft\":0,\"spaceleftMu\":\"px\",\"spaceright\":0,\"spacerightMu\":\"px\",\"syncPaddingLeftRight\":true,\"syncPaddingTopBottom\":true,\"type\":\"thumbnailgrid\",\"yvel\":1,\"zIndex\":5}]}","phonegrid":"","_links":{"self":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":0,"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"wp:attachment":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10,"date":"2022-02-06T22:14:02","date_gmt":"2022-02-06T21:14:02","guid":{"rendered":"http:\/\/beta.chrrmnn.com\/?page_id=10"},"modified":"2026-08-21T12:09:27","modified_gmt":"2026-08-21T10:09:27","slug":"chrrmnn","status":"publish","type":"page","link":"https:\/\/beta.chrrmnn.com\/en\/","title":{"rendered":"CHRRMNN"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"h5ap_radio_sources":[]},"class_list":["post-10","page","type-page","status-publish","hentry"],"grid":"{\"colCount\":12,\"colGutter\":0,\"rowGutters\":[0,3],\"rowGutter\":3,\"frameMargin\":5,\"leftFrameMargin\":0,\"rightFrameMargin\":0,\"topFrameMargin\":0,\"mus\":{\"bottomFrameMu\":\"px\",\"colGutterMu\":\"px\",\"frameMu\":\"px\",\"rowGutterMu\":\"%\",\"topFrameMu\":\"%\"},\"bottomFrameMargin\":9,\"rowAttrs\":[{\"bgcolorMode\":\"whole\",\"row100vh\":false,\"rowcustomheight\":\"150vh\",\"relid\":9},{\"bgcolorMode\":\"whole\",\"fixedPosition\":false,\"fixedHideOnPhone\":false,\"relid\":20,\"html_id\":\"about\"},{\"relid\":3}],\"bgColor\":\"#f0edea\",\"bgImage\":null,\"bgVideo\":null,\"cont\":[{\"absolute_position\":true,\"align\":\"top\",\"col\":0,\"colspan\":12,\"config\":{\"label\":\"\"},\"cont\":\"\\n\\n\\n\\n\\nCHRRMNN \\u2014 Art Director \/ Designer<\/title>\\n<style>\\n :root {\\n \/* Farbe der Abdeckung, die die dahinterliegende Website zun\\u00e4chst verh\\u00fcllt.\\n Beliebig anpassbar. Wird vom Skript ausgelesen und auf die Canvas gemalt. *\/\\n --cover: #131313;\\n }\\n\\n \/* Eigene Schrift. Lege die Font-Datei(en) neben diese HTML-Datei bzw. passe\\n die Pfade im src an (z. B. auf deinen \/fonts-Ordner beim Einbetten). *\/\\n @font-face {\\n font-family: 'PPNeueMontreal-Regular';\\n font-weight: 400;\\n font-style: normal;\\n font-display: swap;\\n }\\n\\n * { box-sizing: border-box; }\\n\\n html, body {\\n margin: 0;\\n padding: 0;\\n \/* KEIN eigener Hintergrund: alles au\\u00dferhalb dieses Elements bleibt\\n transparent, damit die darunterliegende Website durchscheinen kann.\\n Beim Einbetten in eine bestehende Seite deshalb wichtig. *\/\\n background: transparent;\\n font-family: 'PPNeueMontreal-Regular', 'Helvetica Neue', Helvetica, Arial, sans-serif;\\n }\\n\\n \/* Scroll-Strecke: gibt dem Effekt Raum zum Ablaufen.\\n H\\u00f6he bestimmt, wie \\\"lang\\\" man scrollen muss. *\/\\n .hero-scroll {\\n position: relative;\\n height: 200vh;\\n }\\n\\n \/* Der eigentlich sichtbare Bereich bleibt beim Scrollen stehen (sticky). *\/\\n .hero-sticky {\\n position: sticky;\\n top: 0;\\n left: 0;\\n width: 100%;\\n height: 100vh;\\n overflow: hidden;\\n \/* Transparent \\u2013 die undurchsichtige Abdeckung kommt allein aus der Canvas.\\n Die per destination-out ausgestanzten Textbereiche werden echt\\n transparent und geben den Blick auf das frei, was unter diesem\\n Element liegt. *\/\\n background: transparent;\\n }\\n\\n \/* Die Canvas ersetzt das fr\\u00fchere SVG samt Maske. Sie liegt pixelgenau \\u00fcber\\n dem Viewport; der Effekt wird komplett in 2D-Canvas gerendert. *\/\\n .hero-canvas {\\n display: block;\\n width: 100%;\\n height: 100%;\\n }\\n\\n \/* Fallback-Content f\\u00fcr Screenreader \/ SEO, visuell ausgeblendet,\\n da der eigentliche Text als Ausstanzung auf der Canvas gerendert wird. *\/\\n .sr-only {\\n position: absolute;\\n width: 1px; height: 1px;\\n padding: 0; margin: -1px;\\n overflow: hidden;\\n clip: rect(0,0,0,0);\\n white-space: nowrap;\\n border: 0;\\n }\\n\\n @media (prefers-reduced-motion: reduce) {\\n .hero-scroll { height: 100vh; }\\n }\\n<\/style>\\n<\/head>\\n<body>\\n\\n<h1 class=\\\"sr-only\\\">CHRRMNN \\u2014 Art Director, Designer<\/h1>\\n\\n<section class=\\\"hero-scroll\\\" id=\\\"heroScroll\\\">\\n <div class=\\\"hero-sticky\\\">\\n <canvas class=\\\"hero-canvas\\\" id=\\\"heroCanvas\\\"><\/canvas>\\n <\/div>\\n<\/section>\\n\\n<script>\\n(function () {\\n \/* =====================================================================\\n WARUM CANVAS STATT SVG-MASKE?\\n ---------------------------------------------------------------------\\n Die vorherige Fassung stanzte den Text \\u00fcber eine SVG-<mask> aus einem\\n bildschirmf\\u00fcllenden <rect>. Das Problem: eine SVG-Maske ist NICHT\\n compositor-\/GPU-beschleunigt. Sobald sich der Maskeninhalt \\u00e4ndert \\u2013\\n und hier \\u00e4ndert er sich in JEDEM Animations-Frame (Skalierung +\\n wachsende stroke-width) \\u2013 muss der Browser die komplette Maske \\u00fcber die\\n GESAMTE Viewport-Fl\\u00e4che neu rastern. Diese Kosten wachsen mit\\n Breite \\u00d7 H\\u00f6he. Auf 4K\/Ultrawide-Fenstern wird genau das zum Flaschenhals.\\n\\n Canvas + globalCompositeOperation='destination-out' erledigt denselben\\n Effekt (echte L\\u00f6cher, die die Host-Seite durchscheinen lassen), aber mit\\n GPU-freundlichen fill\/Text-Operationen. Pro Frame nur: 1\\u00d7 Fl\\u00e4che f\\u00fcllen\\n und 3 kurze Textzeilen zeichnen \\u2013 unabh\\u00e4ngig von der Maskenkomplexit\\u00e4t\\n und um ein Vielfaches billiger als das SVG-Masken-Re-Rastering.\\n\\n Zus\\u00e4tzliche Absicherung f\\u00fcr sehr gro\\u00dfe Fenster: der Canvas-Backing-Store\\n wird \\u00fcber MAX_DPR gedeckelt (siehe unten), damit die Pixelanzahl auf\\n Retina-4K nicht explodiert.\\n ===================================================================== *\/\\n\\n const canvas = document.getElementById('heroCanvas');\\n const ctx = canvas.getContext('2d');\\n const wrapper = document.getElementById('heroScroll');\\n\\n const LINES = ['LET\\u2019S', 'CREATE'];\\n const FONT_STACK = '\\\"PPNeueMontreal-Regular\\\", \\\"Helvetica Neue\\\", Helvetica, Arial, sans-serif';\\n\\n \/\/ Abdeckungsfarbe aus der CSS-Variable lesen (bleibt zentral anpassbar).\\n const COVER = (getComputedStyle(document.documentElement)\\n .getPropertyValue('--cover').trim()) || '#131313';\\n\\n \/\/ Separater Mess-Kontext, damit die Transform-Matrix des Zeichen-Kontexts\\n \/\/ beim Vermessen der Textbreite unber\\u00fchrt bleibt.\\n const measureCanvas = document.createElement('canvas');\\n const measureCtx = measureCanvas.getContext('2d');\\n\\n let vw = 0, vh = 0, dpr = 1;\\n let baseFontSize = 60; \/\/ Gr\\u00f6\\u00dfe bei Scroll-Progress 0 (\\\"ART DIRECTOR\\\" f\\u00fcllt die Breite)\\n let baseLineHeight = 60;\\n let baseStartY = 0;\\n let centerX = 0, centerY = 0;\\n let lineY = []; \/\/ gecachte Y-Mitten der drei Zeilen\\n let wrapperTop = 0;\\n let totalScrollable = 0;\\n\\n const WIDTH_PADDING = 0.5\\n const HEIGHT_PADDING = 0.5; \/\/ Anteil der Viewport-H\\u00f6he f\\u00fcr den 3-Zeilen-Block bei Progress 0\\n const LINE_HEIGHT_FACTOR = 0.9\\n\\n \/\/ Wie stark die Schrift beim Scrollen w\\u00e4chst und dicker wird \\u2013 f\\u00fcr alle\\n \/\/ drei Zeilen einheitlich und synchron, kein Zeitversatz zwischen ihnen.\\n const GROWTH_FACTOR = 8;\\n const STROKE_FACTOR = 2;\\n\\n \/\/ Easing: Fortschritt wird potenziert \\u2192 langsamer Start, Beschleunigung\\n \/\/ zum Ende hin (ease-in).\\n const EASE_POWER = 2.2;\\n\\n \/\/ Backing-Store-Aufl\\u00f6sung deckeln. Auf Retina-4K w\\u00e4re devicePixelRatio 2\\u20133\\n \/\/ und die Canvas m\\u00fcsste z. B. 7680\\u00d74320 Pixel pro Frame bef\\u00fcllen. Ein Cap\\n \/\/ bei 2 h\\u00e4lt die Pixellast beherrschbar, ohne dass die riesigen Buchstaben\\n \/\/ sichtbar an Sch\\u00e4rfe verlieren.\\n const MAX_DPR = 2;\\n\\n function easeInProgress(p) {\\n return Math.pow(p, EASE_POWER);\\n }\\n\\n \/\/ ---- Feder-Physik: Ziel-Werte werden nicht 1:1 an den Scroll gekoppelt,\\n \/\/ sondern laufen einer Feder sanft hinterher (niedrige STIFFNESS + hohe\\n \/\/ DAMPING = weiches Nachziehen mit nur minimalem \\u00dcberschwingen).\\n const SPRING_STIFFNESS = 0.1;\\n const SPRING_DAMPING = 0.7;\\n const SPRING_EPSILON = 0.0008; \/\/ Schwelle, ab der eine Feder als \\\"eingeschwungen\\\" gilt\\n\\n function createSpring(initial) {\\n return { value: initial, velocity: 0, target: initial };\\n }\\n\\n function stepSpring(spring) {\\n const force = (spring.target - spring.value) * SPRING_STIFFNESS;\\n spring.velocity = (spring.velocity + force) * SPRING_DAMPING;\\n spring.value += spring.velocity;\\n return Math.abs(spring.target - spring.value) < SPRING_EPSILON &&\\n Math.abs(spring.velocity) < SPRING_EPSILON;\\n }\\n\\n \/\/ EINE Feder f\\u00fcr die Text-Skalierung, EINE f\\u00fcr die Strichbreite\\n \/\/ (gelten f\\u00fcr alle drei Zeilen gemeinsam).\\n const scaleSpring = createSpring(1);\\n const strokeSpring = createSpring(0);\\n\\n let currentProgress = 0;\\n let ticking = false;\\n let loopRunning = false;\\n\\n function computeLayout() {\\n vw = window.innerWidth;\\n vh = window.innerHeight;\\n dpr = Math.min(window.devicePixelRatio || 1, MAX_DPR);\\n\\n \/\/ Backing-Store in Ger\\u00e4tepixeln, CSS-Gr\\u00f6\\u00dfe in Layoutpixeln.\\n \/\/ Achtung: das Setzen von canvas.width\/height SETZT DEN KONTEXT ZUR\\u00dcCK \\u2013\\n \/\/ deshalb werden die statischen ctx-Eigenschaften direkt danach neu gesetzt.\\n canvas.width = Math.round(vw * dpr);\\n canvas.height = Math.round(vh * dpr);\\n canvas.style.width = vw + 'px';\\n canvas.style.height = vh + 'px';\\n\\n \/\/ Referenzgr\\u00f6\\u00dfe messen (einmal pro Layout, nicht pro Frame).\\n const REF = 100;\\n measureCtx.font = '400 ' + REF + 'px ' + FONT_STACK;\\n let maxWidth = 0;\\n for (let i = 0; i < LINES.length; i++) {\\n const w = measureCtx.measureText(LINES[i]).width;\\n if (w > maxWidth) maxWidth = w;\\n }\\n\\n const availW = vw * WIDTH_PADDING;\\n baseFontSize = REF * (availW \/ maxWidth);\\n\\n baseLineHeight = baseFontSize * LINE_HEIGHT_FACTOR;\\n let totalHeight = baseLineHeight * LINES.length;\\n const availH = vh * HEIGHT_PADDING;\\n\\n if (totalHeight > availH) {\\n const scale = availH \/ totalHeight;\\n baseFontSize *= scale;\\n baseLineHeight = baseFontSize * LINE_HEIGHT_FACTOR;\\n totalHeight = baseLineHeight * LINES.length;\\n }\\n\\n baseStartY = (vh - totalHeight) \/ 2;\\n centerX = vw \/ 2;\\n centerY = baseStartY + totalHeight \/ 2;\\n\\n \/\/ Y-Mitten der Zeilen einmalig cachen.\\n lineY = [];\\n for (let i = 0; i < LINES.length; i++) {\\n lineY.push(baseStartY + baseLineHeight * i + baseLineHeight \/ 2);\\n }\\n\\n \/\/ Statische Zeichen-Eigenschaften EINMAL setzen (\\u00fcberleben die Frames, da\\n \/\/ fillRect\/clearRect\/setTransform den restlichen Kontext-State nicht\\n \/\/ zur\\u00fccksetzen). Pro Frame \\u00e4ndern sich nur Transform, lineWidth,\\n \/\/ Composite-Modus und fillStyle.\\n ctx.font = '400 ' + baseFontSize + 'px ' + FONT_STACK;\\n ctx.textAlign = 'center';\\n ctx.textBaseline = 'middle';\\n ctx.lineJoin = 'round';\\n ctx.lineCap = 'round';\\n\\n \/\/ Scroll-Geometrie einmalig cachen (bei Layout\/Resize) \\u2013 dadurch l\\u00f6st der\\n \/\/ Scroll-Handler selbst KEINE Layout-Reads (getBoundingClientRect etc.)\\n \/\/ mehr aus, sondern rechnet nur noch mit gecachten Zahlen.\\n wrapperTop = wrapper.offsetTop;\\n totalScrollable = wrapper.offsetHeight - vh;\\n\\n updateTargets(currentProgress);\\n draw(); \/\/ Canvas wurde durch die Gr\\u00f6\\u00dfen\\u00e4nderung geleert \\u2192 einmal neu zeichnen\\n startLoopIfNeeded();\\n }\\n\\n \/\/ Setzt die ZIEL-Werte der Federn (die weiche Ann\\u00e4herung passiert im rAF-Loop).\\n function updateTargets(progress) {\\n currentProgress = progress;\\n const eased = easeInProgress(progress);\\n scaleSpring.target = 1 + eased * GROWTH_FACTOR;\\n strokeSpring.target = eased * baseFontSize * STROKE_FACTOR;\\n }\\n\\n \/\/ Ein Frame zeichnen: Abdeckung f\\u00fcllen, dann Text ausstanzen.\\n function draw() {\\n const s = scaleSpring.value;\\n const strokeWidth = Math.max(0, strokeSpring.value);\\n\\n \/\/ Basis-Transform inkl. DPR; Matrix wird jeden Frame komplett neu gesetzt,\\n \/\/ damit sich die anschlie\\u00dfenden translate\/scale nicht akkumulieren.\\n ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\\n ctx.clearRect(0, 0, vw, vh);\\n\\n \/\/ 1) Undurchsichtige Abdeckung \\u00fcber den gesamten Viewport.\\n ctx.globalCompositeOperation = 'source-over';\\n ctx.fillStyle = COVER;\\n ctx.fillRect(0, 0, vw, vh);\\n\\n \/\/ 2) Text als L\\u00f6cher ausstanzen \\u2192 echte Transparenz zur Host-Seite darunter.\\n \/\/ Uniformes scale() um die Blockmitte: alle L\\u00f6cher wachsen synchron.\\n \/\/ Der Kontext-Scale multipliziert auch die lineWidth \\u2013 genau wie zuvor\\n \/\/ die group-transform die stroke-width mitskaliert hat.\\n ctx.globalCompositeOperation = 'destination-out';\\n ctx.translate(centerX, centerY);\\n ctx.scale(s, s);\\n ctx.translate(-centerX, -centerY);\\n\\n ctx.lineWidth = strokeWidth;\\n for (let i = 0; i < LINES.length; i++) {\\n if (strokeWidth > 0) ctx.strokeText(LINES[i], centerX, lineY[i]);\\n ctx.fillText(LINES[i], centerX, lineY[i]);\\n }\\n }\\n\\n \/\/ rAF-Loop: integriert die Federn und zeichnet. L\\u00e4uft NUR, solange sich\\n \/\/ mindestens eine Feder noch bewegt \\u2013 kein dauerhafter Leerlauf-Loop, die\\n \/\/ Canvas bleibt im Ruhezustand einfach unver\\u00e4ndert stehen.\\n function tick() {\\n const scaleSettled = stepSpring(scaleSpring);\\n const strokeSettled = stepSpring(strokeSpring);\\n draw();\\n if (scaleSettled && strokeSettled) {\\n loopRunning = false;\\n return; \/\/ Loop stoppen, sobald alles zur Ruhe gekommen ist\\n }\\n requestAnimationFrame(tick);\\n }\\n\\n function startLoopIfNeeded() {\\n if (!loopRunning) {\\n loopRunning = true;\\n requestAnimationFrame(tick);\\n }\\n }\\n\\n function onScroll() {\\n if (ticking) return;\\n ticking = true;\\n requestAnimationFrame(function () {\\n \/\/ Reine Arithmetik mit gecachten Werten (wrapperTop\/totalScrollable) \\u2013\\n \/\/ kein Layout-Read pro Scroll-Event, das erzwungene Reflows vermeidet.\\n const scrolled = window.scrollY - wrapperTop;\\n let progress = totalScrollable > 0 ? scrolled \/ totalScrollable : 0;\\n progress = Math.min(Math.max(progress, 0), 1);\\n updateTargets(progress);\\n startLoopIfNeeded();\\n ticking = false;\\n });\\n }\\n\\n let resizeTimeout = null;\\n function onResize() {\\n \/\/ Debounce: computeLayout() ist vergleichsweise teuer (misst Text neu,\\n \/\/ reallokiert den Canvas-Backing-Store), soll aber nicht bei jedem\\n \/\/ einzelnen Resize-Event w\\u00e4hrend des Ziehens am Fenster laufen.\\n clearTimeout(resizeTimeout);\\n resizeTimeout = setTimeout(computeLayout, 120);\\n }\\n\\n window.addEventListener('scroll', onScroll, { passive: true });\\n window.addEventListener('resize', onResize);\\n\\n computeLayout();\\n\\n \/\/ Wenn die Web-Schrift asynchron nachl\\u00e4dt, ist die zuerst gemessene\\n \/\/ Textbreite noch die der Ersatzschrift. Sobald PPNeueMontreal-Regular\\n \/\/ bereit ist, einmal neu vermessen, damit die Gr\\u00f6\\u00dfe exakt sitzt.\\n if (document.fonts && document.fonts.ready) {\\n document.fonts.load('400 60px \\\"PPNeueMontreal-Regular\\\"').catch(function () {});\\n document.fonts.ready.then(computeLayout);\\n }\\n})();\\n<\/script>\\n\\n<\/body>\\n<\/html>\",\"frameOverflow\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":1,\"row\":0,\"spaceabove\":0,\"spacebelow\":0,\"type\":\"html\",\"yvel\":1,\"zIndex\":11,\"classes\":\"pointer-none\"},{\"absolute_position\":true,\"align\":\"top\",\"col\":0,\"colspan\":12,\"cont\":\"\",\"customInlineStyle\":\"top: 3vw;\\nmix-blend-mode: difference\",\"margin\":{\"bottom\":3,\"bottomMu\":\"%\",\"left\":3,\"leftMu\":\"%\",\"right\":3,\"rightMu\":\"%\",\"syncLeftRight\":true,\"syncTopBottom\":true,\"top\":3,\"topMu\":\"%\"},\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":5,\"row\":0,\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":20,\"type\":\"text\",\"yvel\":1,\"zIndex\":12},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1770,\"col\":1,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":1,\"relid\":6,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2025\/01\/reverse-fashion_iphone_3.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":1,\"attid\":1127,\"col\":2,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2021\/03\/cf-color-02.svg\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsDraggable\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":172,\"offsetx\":0,\"offsety\":0,\"push\":2,\"relid\":10,\"row\":0,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2021\/03\/cf-color-02.svg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":172,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1691,\"col\":2,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":2,\"relid\":17,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-4.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"top\",\"alt\":\"\",\"ar\":2.02288329519450815752179551054723560810089111328125,\"attid\":1666,\"col\":3,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1768,\"offsetx\":0,\"offsety\":0,\"push\":3,\"relid\":14,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3-265x536.png\",\"_512\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3-512x1036.png\",\"_768\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3-768x1554.png\",\"full\":\"\/wp-content\/uploads\/2023\/12\/bbe_iphone_3.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":874,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1690,\"col\":4,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":4,\"relid\":16,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-3.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":1,\"attid\":1128,\"col\":5,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2021\/03\/cf-color-03.svg\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsDraggable\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":172,\"offsetx\":0,\"offsety\":0,\"push\":5,\"relid\":8,\"row\":0,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2021\/03\/cf-color-03.svg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":172,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":1,\"attid\":1126,\"col\":7,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2021\/03\/cf-color-01.svg\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":172,\"offsetx\":0,\"offsety\":0,\"push\":7,\"relid\":7,\"row\":0,\"sizes\":{\"full\":\"\/wp-content\/uploads\/2021\/03\/cf-color-01.svg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":172,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.02288329519450815752179551054723560810089111328125,\"attid\":1658,\"col\":7,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1768,\"offsetx\":0,\"offsety\":0,\"push\":7,\"relid\":13,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1-265x536.png\",\"_512\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1-512x1036.png\",\"_768\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1-768x1554.png\",\"full\":\"\/wp-content\/uploads\/2023\/12\/bb_iphone_1.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":874,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"top\",\"alt\":\"\",\"ar\":1.306382978723404253429407617659308016300201416015625,\"attid\":1653,\"col\":7,\"colspan\":4,\"cont\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":2763,\"offsetx\":0,\"offsety\":0,\"push\":7,\"relid\":12,\"row\":0,\"sizes\":{\"_1024\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-1024x1338.png\",\"_1280\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-1280x1672.png\",\"_1920\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-1920x2508.png\",\"_265\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-265x346.png\",\"_512\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-512x669.png\",\"_768\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1-768x1003.png\",\"full\":\"\/wp-content\/uploads\/2023\/03\/lymbic_ipad_1.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"textOnElement\":{\"bottomCenter\":\"\",\"bottomLeft\":\"\",\"bottomRight\":\"\",\"centerCenter\":\"\",\"darkGradientAtBottom\":false,\"darkGradientAtBottomColor\":\"#000000\",\"darkGradientAtTop\":false,\"darkGradientAtTopColor\":\"#000000\",\"enableSpacePhone\":false,\"enabled\":false,\"leftCenter\":\"\",\"mixBlendModeDifference\":false,\"rightCenter\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"topCenter\":\"\",\"topLeft\":\"\",\"topRight\":\"\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\"},\"type\":\"img\",\"w\":2115,\"yvel\":1,\"frameOverflow\":\"\",\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"bottom\",\"alt\":\"\",\"ar\":2.02288329519450815752179551054723560810089111328125,\"attid\":1655,\"col\":8,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1768,\"offsetx\":0,\"offsety\":0,\"push\":8,\"relid\":11,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2-265x536.png\",\"_512\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2-512x1036.png\",\"_768\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2-768x1554.png\",\"full\":\"\/wp-content\/uploads\/2023\/03\/lymbic_iphone_2.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":874,\"yvel\":1,\"textOnElement\":{\"enabled\":false,\"topLeft\":\"\",\"topCenter\":\"\",\"topRight\":\"\",\"leftCenter\":\"\",\"centerCenter\":\"\",\"rightCenter\":\"\",\"bottomLeft\":\"\",\"bottomCenter\":\"\",\"bottomRight\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"enableSpacePhone\":false,\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\",\"darkGradientAtTop\":false,\"darkGradientAtBottom\":false,\"darkGradientAtTopColor\":\"#000000\",\"darkGradientAtBottomColor\":\"#000000\",\"mixBlendModeDifference\":false},\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":true,\"align\":\"middle\",\"alt\":\"\",\"ar\":2.05989110707804012889710065792314708232879638671875,\"attid\":1688,\"col\":9,\"colspan\":2,\"cont\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1.png\",\"dragPhysicsApplyTo\":\"whole\",\"dragPhysicsCollideWithElements\":true,\"dragPhysicsConstrainRowRelid\":9,\"dragPhysicsDisableOnPhone\":false,\"dragPhysicsGravityMode\":\"up\",\"dragPhysicsGravityStrength\":2,\"dragPhysicsPreset\":\"gentle_float\",\"dragPhysicsRotate\":true,\"dragPhysicsRotationStrength\":30,\"dragPhysicsSpeed\":2,\"enableDragPhysics\":true,\"h\":1135,\"offsetx\":0,\"offsety\":0,\"push\":9,\"relid\":15,\"row\":0,\"sizes\":{\"_265\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1-265x546.png\",\"_512\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1-512x1055.png\",\"full\":\"\/wp-content\/uploads\/2024\/06\/Kepler-iphone-1.png\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":null,\"type\":\"img\",\"w\":551,\"yvel\":1,\"dragPhysicsHideOnPhone\":true},{\"absolute_position\":false,\"align\":\"top\",\"alt\":\"\",\"ar\":0.6796666666666666412055519685964100062847137451171875,\"attid\":1347,\"classes\":\"portrait\",\"col\":0,\"colspan\":6,\"cont\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn.jpg\",\"enableDragPhysicsAutoFloat\":true,\"fixedHeight\":{\"enableFixedHeight\":true,\"height\":\"100svh\",\"objectFit\":\"cover\",\"objectPosition\":\"center center\"},\"frameOverflow\":\"left\",\"h\":2039,\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":28,\"row\":1,\"sizes\":{\"_1024\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-1024x696.jpg\",\"_1280\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-1280x870.jpg\",\"_1920\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-1920x1305.jpg\",\"_2560\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-2560x1740.jpg\",\"_265\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-265x180.jpg\",\"_512\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-512x348.jpg\",\"_768\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn-768x522.jpg\",\"full\":\"\/wp-content\/uploads\/2022\/03\/chrrmnn.jpg\"},\"spaceabove\":0,\"spacebelow\":0,\"stickytop\":\"0\",\"textOnElement\":{\"bottomCenter\":\"\",\"bottomLeft\":\"\",\"bottomRight\":\"\",\"centerCenter\":\"\",\"darkGradientAtBottom\":false,\"darkGradientAtBottomColor\":\"#000000\",\"darkGradientAtTop\":false,\"darkGradientAtTopColor\":\"#000000\",\"enableSpacePhone\":false,\"enabled\":false,\"leftCenter\":\"\",\"mixBlendModeDifference\":false,\"rightCenter\":\"\",\"spaceLeftRight\":10,\"spaceLeftRightMu\":\"px\",\"spaceLeftRightPhone\":10,\"spaceLeftRightPhoneMu\":\"px\",\"spaceTopBottom\":10,\"spaceTopBottomMu\":\"px\",\"spaceTopBottomPhone\":10,\"spaceTopBottomPhoneMu\":\"px\",\"topCenter\":\"\",\"topLeft\":\"\",\"topRight\":\"\",\"verticalOffsetCenter\":0,\"verticalOffsetCenterMu\":\"px\",\"verticalOffsetCenterPhone\":0,\"verticalOffsetCenterPhoneMu\":\"px\"},\"type\":\"img\",\"w\":3000,\"yvel\":1,\"zIndex\":3},{\"absolute_position\":false,\"align\":\"top\",\"col\":6,\"colspan\":6,\"cont\":[{\"absolute_position\":false,\"align\":\"top\",\"classes\":\"marquee-full-width responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"config\":{\"alignment\":\"middle\",\"backgroundColor\":\"\",\"borderBottomWidth\":\"0\",\"borderColor\":\"#000000\",\"borderTopWidth\":\"0\",\"desktop\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"elements\":[{\"cont\":\"Web<\/p>\",\"type\":\"text\"},{\"cont\":\"UX\/UI<\/p>\",\"type\":\"text\"},{\"cont\":\"Print<\/p>\",\"type\":\"text\"},{\"cont\":\"Packaging<\/p>\",\"type\":\"text\"},{\"cont\":\"Editorial<\/p>\",\"type\":\"text\"}],\"pauseonhover\":false,\"phone\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"reversedirection\":false,\"separator\":\"\",\"speed\":120,\"startonhover\":false,\"startonscreen\":true,\"tablet\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"textformat\":\"Big\"},\"cont\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":22,\"row\":0,\"spaceabove\":0,\"spacebelow\":0,\"type\":\"marquee\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"top\",\"classes\":\"responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"cont\":\"I CREATE Visual BRAND IdentitIES<\/p>\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"pxwidth\":null,\"relid\":23,\"row\":1,\"spaceabove\":0,\"spaceaboveMu\":\"%\",\"spacebelow\":0,\"spacebelowMu\":\"%\",\"spaceleft\":3,\"spaceleftMu\":\"%\",\"spaceright\":3,\"spacerightMu\":\"%\",\"syncPaddingLeftRight\":true,\"syncPaddingTopBottom\":true,\"type\":\"text\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"middle\",\"classes\":\"responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"cont\":\"I like to support large companies as well as small start-ups and attach great importance to well thought-out, holistic concepts with high design quality for all projects. In doing so, I focus more on con\\u00adtem\\u00ad\\u00adporary sustain\\u00adability than on temporary trends. A long and co\\u00adoperative relation\\u00adship with my clients is as important to me as efficient project management. I know my professional limits and I like to exceed them \\u2013 with the support of experts from my net\\u00adwork and in\\u00a0co\\u00adope\\u00ad\\u00adration with teams of clients or agencies. There is surely more to tell about me and the way I work, but this is best done in a personal conversation.<\/span><\/p>\",\"customInlineStyle\":\"border: 1px 0;\\nborder-color: black\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"pxwidth\":null,\"relid\":24,\"row\":2,\"spaceabove\":0,\"spacebelow\":0,\"spaceleft\":3,\"spaceleftMu\":\"%\",\"spaceright\":3,\"spacerightMu\":\"%\",\"type\":\"text\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"bottom\",\"classes\":\"responsive-margin_120-60\",\"col\":0,\"colspan\":6,\"cont\":\"<a class=\\\"laybutton2 laybutton\\\" rel=\\\"noopener\\\" href=\\\"mailto:hello@chrrmnn.com\\\" target=\\\"_blank\\\">Say hello<\/a><\/p>\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":25,\"row\":3,\"spaceabove\":0,\"spacebelow\":1,\"spaceleft\":3,\"spaceleftMu\":\"%\",\"spaceright\":3,\"spacerightMu\":\"%\",\"type\":\"text\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"middle\",\"classes\":\"tabelle\",\"col\":0,\"colspan\":6,\"config\":{\"columnWidths\":[{\"unit\":\"%\",\"value\":10},{\"unit\":\"%\",\"value\":\"auto\"}],\"cont\":[[{\"cont\":\"\",\"type\":\"text\"},{\"cont\":\"\",\"type\":\"text\"}],[{\"cont\":\"\",\"type\":\"text\"},{\"cont\":\"\",\"type\":\"text\"}],[{\"cont\":\"\",\"type\":\"text\"},{\"cont\":\"\",\"type\":\"text\"}]],\"tableConfig\":{\"backgroundColor\":\"#ffffff\",\"borderColor\":\"#000000\",\"borderWidth\":1,\"bordered\":true,\"cellPaddingLeftRight\":0,\"cellPaddingTopBottom\":8,\"colNumber\":2,\"forceTextAlignment\":false,\"forceTextColor\":false,\"forceTextFormat\":false,\"minHeight\":40,\"nightMode\":false,\"rowNumber\":3,\"showFirstLastHorizontalBorders\":true,\"showFirstLastVerticalBorders\":true,\"showHorizontalBorders\":true,\"showVerticalBorders\":false,\"textAlignment\":\"left\",\"textColor\":\"#000000\",\"textformat\":\"Default\",\"useBackgroundColor\":false,\"verticalTextAlignment\":\"center\"}},\"cont\":\"\",\"customInlineStyle\":\"padding: 0 3vw\",\"frameOverflow\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":4,\"row\":4,\"spaceabove\":0,\"spaceaboveMu\":\"px\",\"spacebelow\":0,\"spacebelowMu\":\"px\",\"spaceleft\":0,\"spaceleftMu\":\"px\",\"spaceright\":0,\"spacerightMu\":\"px\",\"syncPaddingLeftRight\":true,\"syncPaddingTopBottom\":true,\"type\":\"table\",\"yvel\":1},{\"absolute_position\":false,\"align\":\"middle\",\"classes\":\"marquee-full-width\",\"col\":0,\"colspan\":6,\"config\":{\"alignment\":\"middle\",\"backgroundColor\":\"\",\"borderBottomWidth\":\"0\",\"borderColor\":\"#000000\",\"borderTopWidth\":\"0\",\"desktop\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"elements\":[{\"cont\":\"Beyond Build<\/p>\",\"type\":\"text\"},{\"cont\":\"Bendesk<\/p>\",\"type\":\"text\"},{\"cont\":\"olive joy<\/p>\",\"type\":\"text\"},{\"cont\":\"reverse.fashion<\/p>\",\"type\":\"text\"},{\"cont\":\"Ableton<\/p>\",\"type\":\"text\"},{\"cont\":\"BO Berlin Organics<\/p>\",\"type\":\"text\"},{\"cont\":\"Scalara<\/p>\",\"type\":\"text\"},{\"cont\":\"Embassy of Canada<\/p>\",\"type\":\"text\"},{\"cont\":\"Builtech<\/p>\",\"type\":\"text\"},{\"cont\":\"Zalando<\/p>\",\"type\":\"text\"},{\"cont\":\"Tree of Tea<\/p>\",\"type\":\"text\"},{\"cont\":\"circular.fashion<\/p>\",\"type\":\"text\"},{\"cont\":\"mymuesli<\/p>\",\"type\":\"text\"},{\"cont\":\"WeAr Global Magazine<\/p>\",\"type\":\"text\"},{\"cont\":\"Wrangler Footwear<\/p>\",\"type\":\"text\"}],\"pauseonhover\":false,\"phone\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"reversedirection\":false,\"separator\":\"\",\"speed\":120,\"startonhover\":false,\"startonscreen\":true,\"tablet\":{\"imageheight\":50,\"spacebetween\":24,\"spacebottom\":0,\"spacetop\":0},\"textformat\":\"Big\"},\"cont\":\"\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":27,\"row\":5,\"spaceabove\":0,\"spacebelow\":0,\"type\":\"marquee\",\"yvel\":1}],\"html_id\":\"information\",\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":21,\"row\":1,\"spaceabove\":3,\"spaceaboveMu\":\"%\",\"spacebelow\":3,\"spacebelowMu\":\"%\",\"spaceleft\":0,\"spaceleftMu\":\"%\",\"spaceright\":0,\"spacerightMu\":\"px\",\"stackRowDistribution\":\"start\",\"stackRowGutter\":80,\"stackRowGutterMu\":\"px\",\"stickytop\":null,\"syncPaddingLeftRight\":false,\"type\":\"stack\",\"yvel\":1,\"zIndex\":4},{\"absolute_position\":false,\"align\":\"middle\",\"col\":0,\"colspan\":12,\"config\":{\"allFilterText\":\"All\",\"cat_id\":1,\"dateOrder\":\"DESC\",\"deselect_tags\":true,\"desktop\":{\"colCount\":4,\"colGutter\":3,\"colGutterMu\":\"%\",\"customAspectRatio\":false,\"customAspectRatioH\":9,\"customAspectRatioObjectPosition\":\"center center\",\"customAspectRatioW\":16,\"rowGutter\":3,\"rowGutterMu\":\"%\",\"rowsToShow\":3},\"layoutType\":\"masonry\",\"limitThumbnails\":0,\"moreButtonAlignment\":\"center\",\"moreButtonSpaceTop\":20,\"moreButtonText\":\"Load More\",\"onlyShowVisibleTagFilters\":false,\"phone\":{\"colCount\":2,\"colGutter\":4,\"colGutterMu\":\"%\",\"customAspectRatio\":false,\"customAspectRatioH\":9,\"customAspectRatioObjectPosition\":\"center center\",\"customAspectRatioW\":16,\"rowGutter\":8,\"rowGutterMu\":\"%\",\"rowsToShow\":6},\"randomorder\":false,\"reorder_tags\":true,\"roundedCorners\":16,\"showAllFilter\":true,\"showAllProjects\":false,\"showMoreButton\":false,\"showMoreButtonStyle\":\"laybutton1\",\"showfilter\":false,\"showtagfilter\":true,\"singleTagSelectable\":false,\"sortbycustom\":true,\"sortbydate\":false,\"sortbymenuorder\":false,\"sortbyname\":false,\"sortedFilters\":[{\"name\":\"Work\",\"term_id\":1,\"visible\":true}],\"sortedTagFilters\":false,\"tablet\":{\"colCount\":3,\"colGutter\":3,\"colGutterMu\":\"%\",\"customAspectRatio\":false,\"customAspectRatioH\":9,\"customAspectRatioObjectPosition\":\"center center\",\"customAspectRatioW\":16,\"rowGutter\":5,\"rowGutterMu\":\"%\",\"rowsToShow\":3},\"tagFilterBehaviour\":\"or\"},\"cont\":\"\",\"customInlineStyle\":\"padding: 0 3vw\",\"frameOverflow\":\"\",\"margin\":{\"bottom\":6,\"bottomMu\":\"%\",\"left\":0,\"leftMu\":\"px\",\"right\":0,\"rightMu\":\"px\",\"syncTopBottom\":true,\"top\":6,\"topMu\":\"%\"},\"offsetx\":0,\"offsety\":0,\"push\":0,\"relid\":2,\"row\":2,\"scrollAnimation\":{\"enableScrollAnimation\":true,\"presetName\":\"Slide Up (Trigger & Play)\",\"syncWithNavAnim\":false},\"spaceabove\":0,\"spaceaboveMu\":\"%\",\"spacebelow\":0,\"spacebelowMu\":\"%\",\"spaceleft\":0,\"spaceleftMu\":\"px\",\"spaceright\":0,\"spacerightMu\":\"px\",\"syncPaddingLeftRight\":true,\"syncPaddingTopBottom\":true,\"type\":\"thumbnailgrid\",\"yvel\":1,\"zIndex\":5}]}","phonegrid":"","_links":{"self":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/comments?post=10"}],"version-history":[{"count":0,"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/pages\/10\/revisions"}],"wp:attachment":[{"href":"https:\/\/beta.chrrmnn.com\/en\/wp-json\/wp\/v2\/media?parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}