Brand content provenance signal

브랜드 콘텐츠 출처 신호

Give audiences inspectable context about how brand media was made.

···
html
<div class="origin"><div class="origin-art"><span>CAMPAIGN IMAGE</span><div class="origin-shape"></div><strong>OPEN NEW PATHS</strong></div><div class="origin-panel"><button id="origin-button">VIEW ORIGIN</button><div id="origin-details"><b>MADE BY</b><span>STUDIO TEAM</span><b>EDITED WITH</b><span>AI-ASSISTED TOOLS</span></div></div><small>EXAMPLE RECORD · NOT A TRUTH RATING</small></div>
css
.origin{width:min(90%,460px);font:800 clamp(10px,1.9vmin,14px)/1.15 sans-serif}.origin-art{height:clamp(90px,25vmin,145px);position:relative;overflow:hidden;padding:8px;background:linear-gradient(130deg,var(--fg) 50%,var(--accent) 50%);color:var(--bg)}.origin-art span{position:relative;z-index:1}.origin-art strong{position:absolute;bottom:9px;left:9px;z-index:1;font-size:clamp(14px,3vmin,24px)}.origin-shape{position:absolute;width:40%;height:150%;left:45%;top:-20%;border:clamp(12px,4vmin,25px) solid var(--bg);border-radius:50%;transform:rotate(20deg);opacity:.6}.origin-panel{margin-top:6px;border:1px solid var(--line);background:var(--surface)}.origin-panel button{display:block;width:100%;padding:5px 8px;border:0;background:var(--accent);color:white;text-align:left;font:inherit;cursor:pointer}.origin-panel #origin-details{display:grid;grid-template-columns:1fr 1.5fr;gap:3px 8px;max-height:0;overflow:hidden;padding:0 8px;transition:max-height .3s,padding .3s}.origin.open #origin-details{max-height:80px;padding:6px 8px}.origin-panel b{color:var(--muted)}.origin small{display:block;margin-top:5px;color:var(--muted);font-size:clamp(10px,1.6vmin,12px)}@media(min-width:700px){body>div{transform:scale(1.8)}}
js
const root=document.querySelector('.origin');let open=false,touched=false;function show(){root.classList.toggle('open',open);document.querySelector('#origin-button').textContent=open?'HIDE ORIGIN':'VIEW ORIGIN'}document.querySelector('#origin-button').onclick=()=>{touched=true;open=!open;show()};setTimeout(()=>{if(!touched){open=true;show()}},400);setInterval(()=>{if(!touched){open=!open;show()}},3000);

As AI-made and edited media spreads, context about where an image or video came from matters more. The Content Authenticity Initiative describes brands adopting standardized Content Credentials in production workflows in 2026.

Opening the provenance panel in the demo reveals an illustrative maker and edit history. In practice, verify that supported creation and publishing paths preserve inspectable credentials.

Provenance describes production history. It does not prove that a media claim is true or that the product is good.

When to use

Use when customers should be able to inspect how branded media was produced.

Open as page ↗