{/* Drop shadow under case */}
{/* Bottom shell */}
{
setBeatPulse(1);
setAudioLevels([Math.random(),Math.random(),Math.random(),Math.random()]);
setTimeout(()=>setBeatPulse(0.2),120);
setTimeout(()=>setBeatPulse(0),350);
};
return (
Open the case.
Light up your world.
);
}
Object.assign(window, { GunCaseSection });
{/* Top edge highlight rim */}
);
}
// THRAXEL App in a phone frame
function ThraxelApp({ mode, setMode, color, setColor, brightness, setBrightness, warmth, setWarmth, dim, setDim, preset, setPreset, micState, requestMic, beatTap }) {
const tabs = [
{ id:'solid', label:'Color' },
{ id:'warm', label:'Warm' },
{ id:'preset', label:'Scenes' },
{ id:'music', label:'Music' },
];
return (
{/* Vertical reinforcement ribs - more pelican-like */}
{[0.12, 0.22, 0.32, 0.42, 0.58, 0.68, 0.78, 0.88].map((p,i) => (
))}
{/* Bottom rib edge highlights between ribs */}
{[0.17, 0.27, 0.37, 0.5, 0.63, 0.73, 0.83].map((p,i) => (
))}
{/* Corner bumpers — pelican has rounded reinforced corners */}
{/* Wheels at base corners */}
{/* Top shell (lid) */}
{/* egg-crate foam */}
{/* 4 strips */}
{[0,1,2,3].map(i => {
const { c, glow } = stripColor(i);
const visible = caseOpen;
return (
);
})}
{Array.from({length:32}).map((_,j)=>(
))}
{/* Top edge highlight */}
{/* tap to open */}
{!caseOpen && (
)}
{caseOpen && (
)}
{/* Recessed center panel — perfectly centered THRAXEL with gold illumination */}
{/* Vertical ribs on lid - skip the center panel zone (24%-76%) */}
{[0.06, 0.12, 0.18, 0.82, 0.88, 0.94].map((p,i) => (
))}
{/* Corner bumpers */}
{/* Recessed handle on top edge */}
{/* latches — 4 stainless press-and-pull */}
{/* hinge line */}
THRAXEL
{/* Phone bezel */}
);
}
function Slider({ label, value, onChange, unit='', hintLeft, hintRight }){
return (
{/* Notch */}
{/* Screen */}
{/* Status bar */}
{/* Tabs */}
9:41
{/* App header */}
THRAXEL
CONTROLLER
ONLINE
{tabs.map(t => (
))}
{mode==='solid' && (
{['#FFB347','#FFFFFF','#C8102E','#FF7A00','#1A4DCF','#0E8C3A','#7A2DCF','#FFE9C8'].map(c=>(
setColor(e.target.value)} style={{width:'100%',height:32,padding:0,border:'1px solid #2a2a2e',background:'#0a0a0a'}}/>
RGBWW PREVIEW
{SCENE_PRESETS.map(p=>(
))}
)}
{mode==='music' && (
{
micState==='live' ? 'Mic Live' :
micState==='denied' ? 'Mic Denied' :
micState==='requesting' ? 'Requesting…' : 'Tap to Enable'
}
{
micState==='live' ? 'Strips reactive to ambient audio' :
micState==='denied' ? 'Use TAP TO BEAT' :
'Allow mic in browser'
}
4 STRIPS · 128 LEDs
v3.2.1
iOS · Android · Web
onChange(+e.target.value)} style={{accentColor:'var(--thraxel-red)'}}/>
{(hintLeft||hintRight) && (
);
}
function GunCaseSection() {
const [caseOpen, setCaseOpen] = useState(false);
const [mode, setMode] = useState('preset');
const [color, setColor] = useState('#C8102E');
const [brightness, setBrightness] = useState(85);
const [warmth, setWarmth] = useState(20);
const [dim, setDim] = useState(80);
const [preset, setPreset] = useState('everyday');
const [micState, setMicState] = useState('idle');
const [audioLevels, setAudioLevels] = useState([0,0,0,0]);
const [beatPulse, setBeatPulse] = useState(0);
const audioRef = useRef(null);
const requestMic = async () => {
setMicState('requesting');
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio:true });
const ctx = new (window.AudioContext||window.webkitAudioContext)();
const src = ctx.createMediaStreamSource(stream);
const analyser = ctx.createAnalyser();
analyser.fftSize = 64;
src.connect(analyser);
audioRef.current = { ctx, analyser, data: new Uint8Array(analyser.frequencyBinCount) };
setMicState('live');
const tick = () => {
if (!audioRef.current) return;
analyser.getByteFrequencyData(audioRef.current.data);
const bins = audioRef.current.data;
const n = bins.length;
const lvls = [0,1,2,3].map(i => {
let s=0,c=0;
for (let j=Math.floor(i*n/4); j
{hintLeft}{hintRight}
)}
THE DEMO WE BRING TO YOUR DRIVEWAY
This is the same hard case we walk into your driveway with. Four RGBWW strips, controlled live from the Thraxel app. Tap to open. Grant mic access for Music Box.