Expérience de grille dégradée du champ d’aurores
Réalisez une expérience de grille dégradée dans un décor de champ d’aurores : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptative selon les tailles d’écran.
Après activation de JavaScript, ce cas peut être modifié, exécuté et enregistré. Code source fixe ci-dessous :
<!doctype html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expérience de grille dégradée du champ d’aurores</title>
<style>
:root { --ink:#102c44; --paper:#eef6f8; --accent:#e05263; --secondary:#79b7c7; --line:color-mix(in srgb, var(--ink) 18%, transparent); --shadow:0 24px 60px color-mix(in srgb, var(--ink) 16%, transparent); color-scheme:light; }
* { box-sizing:border-box; }
html { min-width:320px; background:var(--paper); }
body { min-height:100vh; margin:0; overflow-x:hidden; color:var(--ink); font-family:"Hiragino Maru Gothic ProN","PingFang SC",sans-serif; background:radial-gradient(circle at 15% 10%,color-mix(in srgb,var(--secondary) 35%,transparent) 0 9%,transparent 10%),radial-gradient(circle at 90% 75%,color-mix(in srgb,var(--accent) 18%,transparent) 0 12%,transparent 13%),var(--paper); }
button,input,select,textarea { color:inherit; font:inherit; }
button,[role="button"],input,select,textarea { accent-color:var(--accent); }
button { cursor:pointer; }
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
[hidden] { display:none !important; }
@media (max-width:700px) { .mast h1 { line-height:1.08 !important; letter-spacing:-.035em !important; overflow-wrap:anywhere; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
.page{width:min(1140px,calc(100% - 28px));margin:auto;padding:54px 0}.mast{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 12px 28px}.mast h1{font-family:"Hiragino Maru Gothic ProN","PingFang SC",sans-serif;font-weight:900;font-size:clamp(38px,8vw,82px);letter-spacing:-.035em;margin:0;line-height:.98}.eyebrow{display:inline-flex;padding:7px 12px;border-radius:999px;color:var(--paper);background:var(--accent);font-weight:900}.intro{max-width:620px;line-height:1.65}.scenario{padding:12px 18px;border-radius:999px;background:var(--secondary);box-shadow:0 7px 0 color-mix(in srgb,var(--ink) 18%,transparent);font-weight:900}.demo{border-radius:46px 18px 46px 18px;box-shadow:0 18px 0 color-mix(in srgb,var(--secondary) 45%,transparent);position:relative;min-height:390px;overflow:hidden;padding:clamp(22px,5vw,54px);background:color-mix(in srgb,var(--paper) 90%,#fff)}@media(max-width:700px){.mast{display:grid}.page{width:calc(100% - 16px);padding:18px 0}.demo{padding:17px}}
.panel{padding:18px;border:2px solid var(--line);border-radius:26px;box-shadow:0 12px 0 color-mix(in srgb,var(--secondary) 35%,transparent)}.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.stack{display:grid;gap:12px}.action{padding:12px 20px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:0 5px 0 var(--ink);font-weight:800}.action:active{transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}.action.primary,.action.is-active{color:var(--paper);background:var(--accent)}.status{text-align:center;min-height:26px;margin-top:18px}.metric{text-align:center;font-size:clamp(34px,8vw,70px);font-weight:900}.muted{text-align:center;opacity:.7}.meter{height:14px;padding:2px;border:2px solid var(--ink);border-radius:999px}.meter>i{display:block;height:100%;border-radius:inherit;background:var(--secondary)}.chip{padding:7px 11px;border-radius:12px;background:color-mix(in srgb,var(--accent) 12%,transparent)}
.composition-gallery{margin:0;padding:clamp(8px,2vw,18px);border:1px solid var(--ink);background:color-mix(in srgb,var(--paper) 78%,transparent)}.gallery-caption{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;padding:15px 4px 2px;font-size:12px}.gallery-caption::before,.gallery-caption::after{content:"";height:1px;background:var(--line)}.gallery-caption strong{font:800 11px/1.2 ui-monospace,monospace;letter-spacing:.16em;text-transform:uppercase}.composition-gallery .demo{box-shadow:none}.composition-gallery .demo::before{content:"";position:absolute;inset:10px;border:1px dashed color-mix(in srgb,var(--accent) 36%,transparent);pointer-events:none}
.mesh-lab{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr);gap:16px}.mesh-stage{--mesh-hue:208;--mesh-sat:78%;--x1:18%;--y1:22%;--x2:82%;--y2:18%;--x3:62%;--y3:82%;position:relative;display:grid;min-height:450px;place-items:center;overflow:hidden;border:1px solid var(--line);border-radius:28px;background:radial-gradient(circle at var(--x1) var(--y1),hsl(var(--mesh-hue) var(--mesh-sat) 68%) 0 5%,transparent 34%),radial-gradient(circle at var(--x2) var(--y2),hsl(calc(var(--mesh-hue) + 74) var(--mesh-sat) 70%) 0 4%,transparent 38%),radial-gradient(circle at var(--x3) var(--y3),hsl(calc(var(--mesh-hue) + 154) var(--mesh-sat) 64%) 0 4%,transparent 40%),linear-gradient(135deg,hsl(calc(var(--mesh-hue) - 28) 46% 14%),hsl(calc(var(--mesh-hue) + 32) 56% 26%));transition:background .5s ease}.mesh-stage::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.17),transparent);mix-blend-mode:overlay}.mesh-stage>div{position:relative;z-index:2;max-width:620px;padding:clamp(28px,7vw,72px);color:white;text-align:center}.mesh-stage h2{margin:.25em 0;font-size:clamp(36px,7vw,78px);line-height:.94}.mesh-controls{display:grid;align-content:center;gap:17px}.mesh-controls label{display:grid;grid-template-columns:1fr auto;gap:8px;font-weight:800}.mesh-controls input{grid-column:1/-1}@media(max-width:740px){.mesh-lab{grid-template-columns:1fr}.mesh-stage{min-height:340px}}.workflow-compare{display:grid;grid-template-columns:minmax(230px,.55fr) minmax(0,1.45fr);gap:18px}.compare-stage{display:grid;gap:12px;min-width:0}.compare-stage>header{display:flex;justify-content:space-between;gap:16px;align-items:end}.compare-stage h2{margin:.2em 0}.compare-core{--compare-split:50%;min-width:0;padding:14px;clip-path:inset(0 calc(100% - var(--compare-split)) 0 0);outline:1px dashed var(--accent);outline-offset:-8px;transition:clip-path .25s,filter .25s}.compare-core[data-compare-channel="B"]{filter:hue-rotate(32deg) saturate(1.15)}.compare-controls{display:grid;align-content:start;gap:16px;padding:20px;border:1px solid var(--line);border-radius:24px 4px 24px 4px;background:var(--paper)}.compare-controls fieldset,.compare-controls>label{display:grid;gap:8px}.compare-controls input[type="range"]{width:100%}#workflowCompareShelf{display:grid;gap:6px;padding:0;margin:0;list-style:none}#workflowCompareShelf li{display:grid;grid-template-columns:auto 1fr auto;gap:8px;padding:9px;border-top:1px solid var(--line);font-size:12px}@media(max-width:900px){.workflow-compare{grid-template-columns:1fr}.compare-stage{order:-1}.compare-core{clip-path:none;border-left:8px solid var(--accent)}}
</style>
</head>
<body data-aesthetic="playful" data-composition="gallery-frame">
<main class="page">
<header class="mast"><div><span class="eyebrow">playful / expérimentation de grille en dégradé / BEGINNER</span><h1>Expérience de grille dégradée du champ d’aurores</h1><p class="intro">Réalisez une expérience de grille dégradée dans un décor de champ d’aurores : contenu réel, contrôles interactifs, retours d’état clairs et mise en page adaptative selon les tailles d’écran.</p></div><span class="scenario">Terres d’aurore</span></header>
<figure class="composition-gallery"><section class="demo" aria-label="Zone interactive de l’expérience de grille dégradée du champ d’aurore"><div class="workflow-compare"><form id="workflowCompareControls" class="compare-controls"><fieldset><legend>Canal de comparaison</legend><label><input type="radio" name="workflowChannel" value="A" checked>A · Rideau lumineux vert</label><label><input type="radio" name="workflowChannel" value="B">B · bande lumineuse magenta</label></fieldset><label>Poids du temps d’exposition<input id="workflowCompareWeight" type="range" min="10" max="90" value="50"><output id="workflowCompareWeightValue">50 s</output></label><label><input id="workflowCompareFreeze" type="checkbox">Geler la version actuelle</label><button id="workflowCompareCapture" class="action primary" type="button">Échantillonner et enregistrer l’exposition</button><ol id="workflowCompareShelf" aria-label="Enregistrement de version"></ol></form><section class="compare-stage"><header><span class="eyebrow">Champ d’aurore COMPARE</span><h2>Comparaison double version en aurore</h2><output id="workflowCompareLive">Version A en attente d’échantillonnage</output></header><section id="workflowCore" class="workflow-core compare-core" data-compare-channel="A" style="--compare-split:50%"><!-- 11DZ_CORE_START:creative-effects-gradient-mesh --><div class="mesh-lab"><section id="meshStage" class="mesh-stage" aria-label="Expérience de grille dégradée du champ d’aurores"><div><span>Terres d’aurore</span><h2>Les couleurs se mélangent naturellement entre plusieurs points d’ancrage</h2><p>Chaque tache lumineuse est un point d’ancrage de maillage indépendant.</p></div></section><aside class="mesh-controls panel"><span class="eyebrow">GRADIENT MESH</span><h2>Expérimentation de grille dégradée</h2><label>Teinte principale <input id="meshHue" type="range" min="0" max="360" value="208" data-core-bridge="creative-effects-gradient-mesh"><output id="meshHueValue">208°</output></label><label>Intensité des couleurs <input id="meshSaturation" type="range" min="35" max="100" value="78"><output id="meshSaturationValue">78%</output></label><button id="meshArrange" class="action primary" type="button">Ancrage de maillage mobile</button></aside></div><!-- 11DZ_CORE_END --></section></section></div><p id="status" class="status" role="status" aria-live="polite"></p></section><figcaption class="gallery-caption"><strong>Prairie d’aurore / GALLERY 03</strong></figcaption></figure>
</main>
<script>
'use strict';
const statusOutput = document.querySelector('#status');
const announce = message => { statusOutput.textContent = message; };
/* 11DZ_CORE_SCRIPT_START:creative-effects-gradient-mesh */
const meshStage=document.querySelector('#meshStage');const meshHue=document.querySelector('#meshHue');const meshSaturation=document.querySelector('#meshSaturation');const meshPositions=[[18,22,82,18,62,82],[72,16,22,66,84,78],[42,12,88,54,18,88],[12,48,58,22,74,86]];let meshPosition=0;function renderMesh(){meshStage.style.setProperty('--mesh-hue',meshHue.value);meshStage.style.setProperty('--mesh-sat',meshSaturation.value+'%');document.querySelector('#meshHueValue').textContent=meshHue.value+'°';document.querySelector('#meshSaturationValue').textContent=meshSaturation.value+'%';announce('Teinte de grille '+meshHue.value+' Degré, concentration '+meshSaturation.value+'%');}[meshHue,meshSaturation].forEach(input=>input.addEventListener('input',renderMesh));document.querySelector('#meshArrange').addEventListener('click',()=>{meshPosition=(meshPosition+1)%meshPositions.length;const values=meshPositions[meshPosition];['--x1','--y1','--x2','--y2','--x3','--y3'].forEach((name,index)=>meshStage.style.setProperty(name,values[index]+'%'));announce('Les points d’ancrage de la grille en dégradé ont été réorganisés');});renderMesh();
/* 11DZ_CORE_SCRIPT_END */
const workflowBridgeSpec={"name":"creative-effects-gradient-mesh","selector":"[data-core-bridge=\"creative-effects-gradient-mesh\"]","mode":"range","key":"ArrowRight"};const workflowBridgeCore=document.querySelector('#workflowCore');const workflowBridgeControl=workflowBridgeCore.querySelector(workflowBridgeSpec.selector);if(!workflowBridgeControl)throw new Error('Missing core bridge: '+workflowBridgeSpec.name);const workflowBridgeControlledId=workflowBridgeControl.getAttribute('aria-controls');const workflowBridgeControlled=workflowBridgeControlledId?document.getElementById(workflowBridgeControlledId):null;workflowBridgeCore.dataset.workflowBridge=workflowBridgeSpec.name;workflowBridgeCore.dataset.workflowVersion='0';function workflowBridgeSerialize(){const visualNode=workflowBridgeCore.firstElementChild||workflowBridgeCore;const visual=getComputedStyle(visualNode);const outputs=[...workflowBridgeCore.querySelectorAll('output,[role="status"],[aria-live],meter,progress')].map(node=>node.textContent.trim()+'|'+node.getAttribute('aria-valuenow')+'|'+node.getAttribute('value'));const canvas=[...workflowBridgeCore.querySelectorAll('canvas')].map(node=>{try{return node.toDataURL().slice(-160);}catch{return 'canvas-unavailable';}});return JSON.stringify({html:workflowBridgeCore.innerHTML,status:statusOutput.textContent,outputs,canvas,visual:[visual.display,visual.visibility,visual.opacity,visual.transform,visual.filter,visual.backgroundColor,visual.width,visual.height],scroll:workflowBridgeSpec.mode==='scroll'?workflowBridgeControl.scrollTop:null});}let workflowBridgeLastEffect=workflowBridgeSerialize();function workflowBridgeSummary(){const label=(workflowBridgeControl.getAttribute('aria-label')||workflowBridgeControl.textContent||workflowBridgeControl.value||workflowBridgeSpec.name).trim().replace(/\s+/g,' ').slice(0,72);return label+' · Version de base '+workflowBridgeCore.dataset.workflowVersion;}function workflowBridgeCommit(){const effect=workflowBridgeSerialize();if(effect===workflowBridgeLastEffect)return {changed:false,summary:workflowBridgeSummary()};workflowBridgeLastEffect=effect;workflowBridgeCore.dataset.workflowVersion=String(Number(workflowBridgeCore.dataset.workflowVersion||0)+1);return {changed:true,summary:workflowBridgeSummary()};}function workflowBridgeScheduleCommit(){queueMicrotask(workflowBridgeCommit);setTimeout(workflowBridgeCommit,0);}workflowBridgeControl.addEventListener("input",workflowBridgeScheduleCommit);workflowBridgeControl.addEventListener('change',workflowBridgeScheduleCommit);const workflowBridgeStateTargets=new Set(workflowBridgeCore.querySelectorAll('dialog'));if(workflowBridgeControlled&&workflowBridgeCore.contains(workflowBridgeControlled))workflowBridgeStateTargets.add(workflowBridgeControlled);workflowBridgeStateTargets.forEach(target=>['close','cancel','toggle'].forEach(eventName=>target.addEventListener(eventName,workflowBridgeScheduleCommit)));function workflowBridgeActivate(){workflowBridgeControl.focus();const step=Number(workflowBridgeControl.step)||1;const min=workflowBridgeControl.min===''?-Infinity:Number(workflowBridgeControl.min);const max=workflowBridgeControl.max===''?Infinity:Number(workflowBridgeControl.max);let next=Math.min(max,Math.max(min,(Number(workflowBridgeControl.value)||0)+step));if(next===Number(workflowBridgeControl.value))next=Math.max(min,Number(workflowBridgeControl.value)-step);workflowBridgeControl.value=String(next);workflowBridgeControl.dispatchEvent(new Event('input',{bubbles:true}));workflowBridgeControl.dispatchEvent(new Event('change',{bubbles:true}));const result=workflowBridgeCommit();setTimeout(workflowBridgeCommit,0);return result;}function workflowBridgeReset(){workflowBridgeCore.dataset.workflowVersion='0';workflowBridgeLastEffect=workflowBridgeSerialize();}
const workflowCompareCore=document.querySelector('#workflowCore');const workflowCompareWeight=document.querySelector('#workflowCompareWeight');const workflowCompareState={channel:'A',weight:50,frozen:false,snapshots:[]};function workflowCompareFingerprint(){const controls=[...workflowCompareCore.querySelectorAll('input,select,textarea')];const outputs=[...workflowCompareCore.querySelectorAll('output,[role="status"],strong')].map(node=>node.textContent.trim()).filter(Boolean);return {controlValues:controls.map(control=>control.type==='checkbox'||control.type==='radio'?control.checked:control.value),summary:outputs.slice(0,4).join(' / '),nodes:workflowCompareCore.querySelectorAll('*').length};}function workflowCompareDrive(){workflowCompareCore.dataset.compareChannel=workflowCompareState.channel;workflowCompareCore.style.setProperty('--compare-split',workflowCompareState.weight+'%');document.querySelector('#workflowCompareWeightValue').textContent=workflowCompareState.weight+' s';document.querySelector('#workflowCompareLive').textContent=workflowCompareState.channel+' Version · '+workflowCompareState.weight+' s'+(workflowCompareState.frozen?' · figé':'');announce('L’aperçu de l’aurore est en cours de consultation '+workflowCompareState.channel+' Version');}function workflowCompareCapture(source){const bridge=workflowBridgeActivate();const snapshot={...workflowCompareFingerprint(),channel:workflowCompareState.channel,weight:workflowCompareState.weight,source,bridge:bridge.summary};workflowCompareState.snapshots.push(snapshot);const item=document.createElement('li');item.innerHTML='<b>'+snapshot.channel+'</b><span>'+(snapshot.summary||snapshot.bridge)+'</span><small>'+snapshot.weight+' s '+snapshot.bridge+'</small>';document.querySelector('#workflowCompareShelf').prepend(item);announce('échantillonné '+snapshot.channel+' version et enregistrer l’exposition · '+bridge.summary);}document.querySelectorAll('[name="workflowChannel"]').forEach(input=>input.addEventListener('change',()=>{workflowCompareState.channel=input.value;workflowCompareDrive();}));workflowCompareWeight.addEventListener('input',()=>{workflowCompareState.weight=Number(workflowCompareWeight.value);workflowCompareDrive();});document.querySelector('#workflowCompareFreeze').addEventListener('change',event=>{workflowCompareState.frozen=event.currentTarget.checked;workflowCompareDrive();});document.querySelector('#workflowCompareCapture').addEventListener('click',()=>workflowCompareCapture('Échantillonnage du bouton'));workflowCompareCore.addEventListener('dblclick',()=>workflowCompareCapture('Double-clic sur la vue principale'));workflowCompareDrive();
workflowBridgeReset();
</script>
</body>
</html>