Reverse trial

리버스 트라이얼

Start with full access, then fall back to a useful free plan when the trial ends.

···
html
<div class="stage"><div class="label">FULL ACCESS → FREE CORE</div><div class="trial-day">DAY <b id="trial-day">6</b> / 7</div><input id="trial-range" type="range" min="1" max="9" value="6" aria-label="Trial day"><div class="trial-cards"><div class="trial-core">CORE FEATURE<small>STAYS OPEN</small></div><div class="trial-premium" id="trial-premium">PREMIUM FEATURE<small id="trial-status">TRIAL ACCESS</small></div></div><div class="hint">SCRUB THE TIMELINE</div></div>
css
.stage{position:relative;width:min(94vw,760px);height:min(88vh,310px);font:800 clamp(10px,max(3.4vmin,1vw),15px)/1.25 sans-serif}.stage *{box-sizing:border-box}.label{font-size:clamp(10px,max(3.4vmin,1vw),12px);letter-spacing:.1em;color:var(--muted)}.accent{color:var(--accent)}.pill{border:1.5px solid var(--fg);border-radius:999px;background:var(--surface);padding:.5em .8em}.hint{position:absolute;right:2%;bottom:0;font-size:clamp(10px,max(3.4vmin,1vw),12px);color:var(--muted)}.trial-day{position:absolute;top:17%;left:4%;font-size:clamp(15px,5vmin,27px);color:var(--accent)}.stage input{position:absolute;top:30%;left:4%;width:92%;accent-color:var(--accent)}.trial-cards{position:absolute;left:4%;right:4%;top:50%;height:36%;display:flex;gap:3%}.trial-cards>div{flex:1;min-width:0;border:2px solid var(--fg);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:var(--accent-2);color:#211b19;font-size:clamp(10px,3.4vmin,15px)}.trial-cards small{display:block;margin-top:.4em;font-size:clamp(10px,3.4vmin,12px)}.trial-premium.closed{background:var(--line);color:var(--fg);border-style:dashed}
js
const slider=document.querySelector('#trial-range'),day=document.querySelector('#trial-day'),premium=document.querySelector('#trial-premium'),status=document.querySelector('#trial-status');let touched=0;function render(){const n=Number(slider.value),closed=n>7;day.textContent=String(n);premium.classList.toggle('closed',closed);status.textContent=closed?'TRIAL ENDED':'TRIAL ACCESS'}slider.addEventListener('input',()=>{touched=Date.now();render()});render();setInterval(()=>{if(Date.now()-touched<6500)return;slider.value=String(Number(slider.value)%9+1);render()},900);

A reverse trial gives new users full access for a limited period, then moves nonpaying users to a useful free plan. It reverses the usual freemium sequence of restricted access first.

Scrub the demo timeline to see premium features close while core features remain. Clearly explain what happens to work created during the trial and when access changes.

When to use

Use it when premium capabilities demonstrate value early and a free path should remain.

Open as page ↗