2026-04-06 01:57:03 +02:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title > Caveman | Lithic Token Compression</ title >
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap" rel = "stylesheet" >
< style >
: root {
/* Ultra-premium stark palette */
--bg : #000000 ;
--bg-elevated : #080808 ;
--border : #1A1A1A ;
--border-hover : #333333 ;
--text-primary : #FFFFFF ;
--text-secondary : #888888 ;
--text-tertiary : #444444 ;
--accent : #FF3300 ;
--accent-glow : rgba ( 255 , 51 , 0 , 0.15 );
/* Syntax / Diff colors */
--diff-removed : rgba ( 255 , 51 , 0 , 0.2 );
--diff-removed-text : #FF6644 ;
--diff-kept : rgba ( 255 , 255 , 255 , 0.05 );
}
* { margin : 0 ; padding : 0 ; box-sizing : border-box ; }
html { scroll-behavior : smooth ; }
body {
background-color : var ( -- bg ); color : var ( -- text - primary );
font-family : 'Inter' , - apple-system , BlinkMacSystemFont , sans-serif ;
overflow-x : hidden ; -webkit- font-smoothing : antialiased ; letter-spacing : -0.02 em ;
2026-05-20 12:36:09 +02:00
cursor : url ( "assets/dancing-rock-32.png" ) 16 16 , auto ;
2026-04-06 01:57:03 +02:00
}
:: selection { background : var ( -- text - primary ); color : var ( -- bg ); }
/* --- DYNAMIC BACKGROUND ELEMENTS --- */
/* 1. Crisp Grid Background */
. bg-grid {
position : fixed ; inset : 0 ; z-index : -2 ; pointer-events : none ;
background-image : linear-gradient ( to right , rgba ( 255 , 255 , 255 , 0.03 ) 1 px , transparent 1 px ),
linear-gradient ( to bottom , rgba ( 255 , 255 , 255 , 0.03 ) 1 px , transparent 1 px );
background-size : 40 px 40 px ;
mask-image : radial-gradient ( ellipse at center , black 40 % , transparent 80 % );
-webkit- mask-image : radial-gradient ( ellipse at center , black 40 % , transparent 80 % );
}
/* 2. Slow Breathing Aura */
. ambient-aura {
position : fixed ; width : 80 vw ; height : 80 vh ; border-radius : 50 % ;
background : radial-gradient ( circle , rgba ( 255 , 51 , 0 , 0.05 ) 0 % , transparent 60 % );
top : 50 % ; left : 50 % ; transform : translate ( -50 % , -50 % );
pointer-events : none ; z-index : -3 ; filter : blur ( 80 px );
animation : breatheAura 15 s ease-in-out infinite alternate ;
}
@ keyframes breatheAura {
0 % { transform : translate ( -50 % , -50 % ) scale ( 0.8 ); opacity : 0.5 ; }
100 % { transform : translate ( -50 % , -60 % ) scale ( 1.2 ); opacity : 1 ; }
}
/* 3. Cursor Tracking Spotlight */
. cursor-glow {
position : fixed ; width : 500 px ; height : 500 px ; border-radius : 50 % ;
background : radial-gradient ( circle , var ( -- accent - glow ) 0 % , transparent 70 % );
top : 0 ; left : 0 ; transform : translate ( -50 % , -50 % );
pointer-events : none ; z-index : -1 ; transition : opacity 0.3 s ease ;
mix-blend-mode : screen ;
}
/* GLOBAL LAYOUT */
. container { max-width : 1040 px ; margin : 0 auto ; padding : 0 24 px ; }
. section { padding : 8 rem 0 ; position : relative ; }
. section-badge {
font-family : 'JetBrains Mono' , monospace ; font-size : 0.75 rem ; text-transform : uppercase ;
color : var ( -- accent ); letter-spacing : 0.1 em ; margin-bottom : 1.5 rem ; display : block ;
}
. section-title { font-size : clamp ( 2 rem , 4 vw , 3 rem ); font-weight : 500 ; letter-spacing : -0.04 em ; margin-bottom : 1.5 rem ; line-height : 1.1 ; }
. section-desc { font-size : 1.1 rem ; color : var ( -- text - secondary ); max-width : 600 px ; line-height : 1.6 ; font-weight : 300 ; }
/* TELEMETRY BONK WIDGET */
. telemetry-widget {
position : fixed ; top : 24 px ; right : 24 px ; z-index : 100 ;
display : flex ; flex-direction : column ; align-items : flex-end ; gap : 4 px ;
font-family : 'JetBrains Mono' , monospace ; font-size : 0.7 rem ; color : var ( -- text - tertiary );
pointer-events : none ;
}
. telemetry-val { color : var ( -- text - primary ); font-size : 0.85 rem ; }
. bonk-flash { color : var ( -- accent ); text-shadow : 0 0 10 px var ( -- accent ); }
/* HERO */
. hero { min-height : 100 vh ; display : flex ; flex-direction : column ; justify-content : center ; padding-top : 4 rem ; position : relative ; }
. hero-repo {
display : inline-flex ; align-items : center ; gap : 8 px ; font-family : 'JetBrains Mono' , monospace ;
font-size : 0.8 rem ; color : var ( -- text - secondary ); text-decoration : none ;
padding : 6 px 12 px ; border : 1 px solid var ( -- border ); border-radius : 4 px ;
margin-bottom : 3 rem ; transition : all 0.2 s ; background : rgba ( 0 , 0 , 0 , 0.5 );
backdrop-filter : blur ( 5 px ); -webkit- backdrop-filter : blur ( 5 px );
}
. hero-repo : hover { border-color : var ( -- text - secondary ); color : var ( -- text - primary ); }
. hero h1 {
font-size : clamp ( 4 rem , 10 vw , 8 rem ); font-weight : 400 ; letter-spacing : -0.06 em ;
line-height : 0.9 ; margin-bottom : 2 rem ; text-transform : lowercase ;
}
. hero-subtitle { font-size : clamp ( 1.2 rem , 3 vw , 1.5 rem ); color : var ( -- text - secondary ); max-width : 700 px ; font-weight : 300 ; line-height : 1.5 ; }
/* THE INLINE CLI COPY */
. cli-install {
margin-top : 4 rem ; display : inline-flex ; align-items : center ; background : rgba ( 10 , 10 , 10 , 0.6 );
border : 1 px solid var ( -- border ); border-radius : 8 px ; padding : 4 px 4 px 4 px 20 px ;
backdrop-filter : blur ( 10 px ); -webkit- backdrop-filter : blur ( 10 px ); transition : border-color 0.3 s ;
}
. cli-install : hover { border-color : var ( -- border - hover ); }
. cli-prefix { color : var ( -- text - tertiary ); font-family : 'JetBrains Mono' , monospace ; margin-right : 16 px ; }
. cli-code { font-family : 'JetBrains Mono' , monospace ; font-size : 0.9 rem ; color : var ( -- text - primary ); padding-right : 24 px ; }
. cli-btn {
background : var ( -- text - primary ); color : var ( -- bg ); border : none ;
padding : 10 px 20 px ; border-radius : 4 px ; font-weight : 500 ; font-size : 0.85 rem ;
cursor : pointer ; transition : transform 0.2 s ;
}
. cli-btn : active { transform : scale ( 0.96 ); }
/* TOKEN PAYLOAD DIFF */
. diff-container { margin-top : 4 rem ; border : 1 px solid var ( -- border ); border-radius : 8 px ; overflow : hidden ; background : rgba ( 0 , 0 , 0 , 0.3 ); backdrop-filter : blur ( 10 px ); -webkit- backdrop-filter : blur ( 10 px ); }
. diff-header {
display : flex ; justify-content : space-between ; padding : 12 px 20 px ;
border-bottom : 1 px solid var ( -- border ); background : rgba ( 10 , 10 , 10 , 0.8 );
font-family : 'JetBrains Mono' , monospace ; font-size : 0.8 rem ; color : var ( -- text - secondary );
}
. diff-body { padding : 32 px ; font-size : 1.1 rem ; line-height : 1.8 ; font-weight : 300 ; color : var ( -- text - secondary ); }
. diff-strike {
text-decoration : line-through ; color : var ( -- diff - removed - text ); background : var ( -- diff - removed );
padding : 2 px 4 px ; border-radius : 3 px ; transition : opacity 0.3 s ;
}
. diff-keep { color : var ( -- text - primary ); font-weight : 400 ; }
. diff-toggle { margin-top : 1 rem ; display : flex ; gap : 1 rem ; justify-content : flex-end ; padding : 0 20 px 20 px ; }
. toggle-btn {
background : none ; border : 1 px solid var ( -- border ); color : var ( -- text - secondary );
padding : 6 px 12 px ; border-radius : 4 px ; font-size : 0.8 rem ; cursor : pointer ;
font-family : 'JetBrains Mono' , monospace ; transition : all 0.2 s ;
}
. toggle-btn . active { background : var ( -- text - primary ); color : var ( -- bg ); border-color : var ( -- text - primary ); }
/* BENTO GRID */
. bento-grid {
display : grid ; grid-template-columns : repeat ( 3 , 1 fr ); gap : 1 px ;
background : var ( -- border ); border : 1 px solid var ( -- border ); border-radius : 8 px ;
overflow : hidden ; margin-top : 4 rem ;
}
. bento-box { background : rgba ( 5 , 5 , 5 , 0.9 ); padding : 40 px ; display : flex ; flex-direction : column ; justify-content : space-between ; backdrop-filter : blur ( 10 px ); -webkit- backdrop-filter : blur ( 10 px ); }
. bento-large { grid-column : span 2 ; }
@ media ( max-width : 800px ) { . bento-grid { grid-template-columns : 1 fr ; } . bento-large { grid-column : span 1 ; } }
. bento-icon { font-size : 2 rem ; margin-bottom : 2 rem ; filter : grayscale ( 1 ); opacity : 0.7 ; }
. bento-title { font-size : 1.2 rem ; font-weight : 500 ; margin-bottom : 0.5 rem ; color : var ( -- text - primary ); }
. bento-desc { color : var ( -- text - secondary ); font-size : 0.95 rem ; line-height : 1.5 ; }
/* DATA VIZ BENCHMARKS */
. viz-container { margin-top : 4 rem ; display : flex ; flex-direction : column ; gap : 2 px ; background : var ( -- border ); border : 1 px solid var ( -- border ); border-radius : 8 px ; overflow : hidden ; }
. viz-row { display : grid ; grid-template-columns : 35 % 65 % ; background : rgba ( 5 , 5 , 5 , 0.9 ); backdrop-filter : blur ( 10 px ); -webkit- backdrop-filter : blur ( 10 px ); transition : background 0.2 s ; }
. viz-row : hover { background : rgba ( 15 , 15 , 15 , 0.9 ); }
. viz-label { padding : 20 px ; font-size : 0.95 rem ; color : var ( -- text - secondary ); border-right : 1 px solid var ( -- border ); display : flex ; align-items : center ; }
. viz-track-container { padding : 20 px ; display : flex ; align-items : center ; }
. viz-track { width : 100 % ; height : 6 px ; background : rgba ( 255 , 255 , 255 , 0.05 ); border-radius : 3 px ; position : relative ; overflow : hidden ; }
. viz-fill { position : absolute ; left : 0 ; top : 0 ; height : 100 % ; background : var ( -- accent ); border-radius : 3 px ; }
. viz-stats { font-family : 'JetBrains Mono' , monospace ; font-size : 0.8 rem ; width : 120 px ; text-align : right ; color : var ( -- text - primary ); }
. viz-stats span { color : var ( -- text - tertiary ); margin-right : 8 px ; }
/* FLOATING GLASS TERMINAL */
. glass-terminal {
margin-top : 4 rem ; background : rgba ( 10 , 10 , 10 , 0.4 ); border : 1 px solid var ( -- border );
border-radius : 12 px ; backdrop-filter : blur ( 30 px ); -webkit- backdrop-filter : blur ( 30 px );
box-shadow : 0 40 px 80 px rgba ( 0 , 0 , 0 , 0.8 ), inset 0 1 px 0 rgba ( 255 , 255 , 255 , 0.05 ); overflow : hidden ;
}
. term-header { padding : 16 px 24 px ; border-bottom : 1 px solid rgba ( 255 , 255 , 255 , 0.05 ); display : flex ; gap : 8 px ; }
. term-dot { width : 12 px ; height : 12 px ; border-radius : 50 % ; background : var ( -- border - hover ); }
. term-body { padding : 32 px 24 px ; font-family : 'JetBrains Mono' , monospace ; font-size : 0.9 rem ; color : var ( -- text - secondary ); min-height : 250 px ; }
. term-line { margin-bottom : 8 px ; line-height : 1.6 ; }
. term-accent { color : var ( -- accent ); }
. term-input-row { display : flex ; align-items : center ; gap : 16 px ; margin-top : 16 px ; }
. term-input { background : none ; border : none ; color : var ( -- text - primary ); font-family : inherit ; font-size : inherit ; flex : 1 ; outline : none ; caret-color : var ( -- accent ); }
/* TICKER MARQUEE */
. marquee { border-top : 1 px solid var ( -- border ); border-bottom : 1 px solid var ( -- border ); padding : 1.5 rem 0 ; overflow : hidden ; display : flex ; background : rgba ( 0 , 0 , 0 , 0.3 ); backdrop-filter : blur ( 5 px ); -webkit- backdrop-filter : blur ( 5 px ); }
. marquee-content { display : flex ; gap : 4 rem ; animation : marquee 20 s linear infinite ; white-space : nowrap ; }
. marquee-item { font-family : 'JetBrains Mono' , monospace ; font-size : 0.8 rem ; color : var ( -- text - tertiary ); letter-spacing : 0.05 em ; }
. marquee-item span { color : var ( -- text - primary ); font-weight : 500 ; margin-left : 8 px ; }
@ keyframes marquee { 0 % { transform : translateX ( 0 ); } 100 % { transform : translateX ( -50 % ); } }
/* FOOTER */
. footer { border-top : 1 px solid var ( -- border ); padding : 4 rem 24 px ; font-size : 0.85 rem ; color : var ( -- text - tertiary ); display : flex ; justify-content : space-between ; max-width : 1040 px ; margin : 0 auto ; position : relative ; z-index : 10 ; }
. footer a { color : var ( -- text - secondary ); text-decoration : none ; transition : color 0.2 s ; }
. footer a : hover { color : var ( -- text - primary ); }
. reveal { opacity : 0 ; transform : translateY ( 30 px ); transition : all 1 s cubic-bezier ( 0.16 , 1 , 0.3 , 1 ); }
. reveal . visible { opacity : 1 ; transform : translateY ( 0 ); }
</ style >
</ head >
< body >
< div class = "bg-grid" ></ div >
< div class = "ambient-aura" ></ div >
< div class = "cursor-glow" id = "cursorGlow" ></ div >
< div class = "telemetry-widget" >
< div > STATUS: < span class = "telemetry-val" style = "color:#4ade80" > OPTIMIZED</ span ></ div >
< div > PHYSICAL_IMPACTS: < span class = "telemetry-val" id = "bonkCount" > 0</ span ></ div >
2026-07-03 13:07:25 +02:00
< div > TOKENS_PURGED: < span class = "telemetry-val" > 65%</ span ></ div >
2026-04-06 01:57:03 +02:00
</ div >
< section class = "hero container" >
< div class = "reveal" >
< a href = "https://github.com/JuliusBrussee/caveman" target = "_blank" class = "hero-repo" >
< svg width = "14" height = "14" viewBox = "0 0 16 16" fill = "currentColor" >< path fill-rule = "evenodd" d = "M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" ></ path ></ svg >
JuliusBrussee / caveman
</ a >
< h1 > Few tokens.< br > Do trick.</ h1 >
< p class = "hero-subtitle" > A semantic constraint engine for Claude Code & Codex. Forces agentic communication into minimal-token lithic structures. Retain 100% technical accuracy while destroying up to 87% of output latency.</ p >
< div class = "cli-install" >
< span class = "cli-prefix" > ❯ </ span >
< span class = "cli-code" > npx skills add JuliusBrussee/caveman</ span >
< button class = "cli-btn" onclick = "copyInstall(this)" > Copy</ button >
</ div >
</ div >
</ section >
< div class = "marquee" >
< div class = "marquee-content" id = "marqueeTrack" >
</ div >
</ div >
< section class = "section container reveal" >
< span class = "section-badge" > 01 // Compression Matrix</ span >
< h2 class = "section-title" > The Lithic Payload Diff</ h2 >
< p class = "section-desc" > Visualize the exact tokens purged by the Caveman protocol. Technical imperatives are retained; conversational padding is annihilated.</ p >
< div class = "diff-container" >
< div class = "diff-header" >
< span > Payload: React Re-render Diagnosis</ span >
< span style = "color: var(--text-primary);" > 69 Tokens → 19 Tokens</ span >
</ div >
< div class = "diff-body" id = "diffBody" >
< span class = "diff-strike" > "The reason your React component is re-rendering is likely because you're creating a</ span > < span class = "diff-keep" > New</ span > object ref< span class = "diff-keep" > erence on</ span > each render < span class = "diff-strike" > cycle. When you pass an</ span > inline object < span class = "diff-strike" > as a</ span > prop< span class = "diff-strike" > , React's shallow comparison sees it as a different object every time, which triggers a</ span > = new ref = re-render. < span class = "diff-strike" > I'd recommend using</ span > < span class = "diff-keep" > Wrap in < code > useMemo</ code ></ span >< span class = "diff-strike" > to memoize the object."</ span >
</ div >
< div class = "diff-toggle" >
< button class = "toggle-btn active" onclick = "setDiffMode('diff', this)" > View Diff</ button >
< button class = "toggle-btn" onclick = "setDiffMode('caveman', this)" > Output Only</ button >
</ div >
</ div >
</ section >
< section class = "section container reveal" >
< span class = "section-badge" > 02 // Empirical Data</ span >
< h2 class = "section-title" > Token Latency Reduction</ h2 >
< p class = "section-desc" > Average reduction of 65% across standard software engineering tasks. Reasoning tokens remain unaffected; only the output payload is compressed.</ p >
< div class = "viz-container" >
< div class = "viz-row" >
< div class = "viz-label" > Explain React re-render bug</ div >
< div class = "viz-track-container" >
< div class = "viz-track" >< div class = "viz-fill" style = "width: 13.4%;" ></ div ></ div >
< div class = "viz-stats" >< span > 159/1180</ span > 87%</ div >
</ div >
</ div >
< div class = "viz-row" >
< div class = "viz-label" > Fix auth token expiry</ div >
< div class = "viz-track-container" >
< div class = "viz-track" >< div class = "viz-fill" style = "width: 17.1%;" ></ div ></ div >
< div class = "viz-stats" >< span > 121/704</ span > 83%</ div >
</ div >
</ div >
< div class = "viz-row" >
< div class = "viz-label" > Debug PostgreSQL race condition</ div >
< div class = "viz-track-container" >
< div class = "viz-track" >< div class = "viz-fill" style = "width: 19.3%;" ></ div ></ div >
< div class = "viz-stats" >< span > 232/1200</ span > 81%</ div >
</ div >
</ div >
< div class = "viz-row" >
< div class = "viz-label" > Explain git rebase vs merge</ div >
< div class = "viz-track-container" >
< div class = "viz-track" >< div class = "viz-fill" style = "width: 41.5%;" ></ div ></ div >
< div class = "viz-stats" >< span > 292/702</ span > 58%</ div >
</ div >
</ div >
< div class = "viz-row" >
< div class = "viz-label" > Review PR for security</ div >
< div class = "viz-track-container" >
< div class = "viz-track" >< div class = "viz-fill" style = "width: 58.7%;" ></ div ></ div >
< div class = "viz-stats" >< span > 398/678</ span > 41%</ div >
</ div >
</ div >
</ div >
</ section >
< section class = "section container reveal" >
< span class = "section-badge" > 03 // Lexical Ruleset</ span >
< h2 class = "section-title" > Execution Architecture</ h2 >
< div class = "bento-grid" >
< div class = "bento-box bento-large" >
< div class = "bento-icon" > 💀</ div >
< div class = "bento-title" > Pleasantry Annihilation</ div >
< div class = "bento-desc" > Standard LLMs waste compute on sycophantic hedging: "I'd be happy to help," or "It might be worth considering." Caveman protocol identifies and destroys these patterns at the generation layer.</ div >
</ div >
< div class = "bento-box" >
< div class = "bento-icon" > ✍️</ div >
< div class = "bento-title" > Code Preservation</ div >
< div class = "bento-desc" > Code blocks, Git commits, and PR descriptions bypass the lithic filter. Caveman writes normal code.</ div >
</ div >
< div class = "bento-box" >
< div class = "bento-icon" > 🧠</ div >
< div class = "bento-title" > Nomenclature Integrity</ div >
< div class = "bento-desc" > Technical jargon is retained precisely. "Polymorphism" remains "polymorphism." Caveman not stupid. Caveman efficient.</ div >
</ div >
< div class = "bento-box bento-large" >
< div class = "bento-icon" > 🔬</ div >
< div class = "bento-title" > Scientific Backing</ div >
< div class = "bento-desc" > Based on the March 2026 paper < em > "Brevity Constraints Reverse Performance Hierarchies in Language Models"</ em > . Forcing brevity improves accuracy by 26 percentage points on key benchmarks. Less word = more correct.</ div >
</ div >
</ div >
</ section >
< section class = "section container reveal" >
< span class = "section-badge" > 04 // Interface</ span >
< h2 class = "section-title" > Initialize Protocol</ h2 >
< div class = "glass-terminal" >
< div class = "term-header" >
< div class = "term-dot" ></ div >< div class = "term-dot" ></ div >< div class = "term-dot" ></ div >
</ div >
< div class = "term-body" id = "termBody" >
< div class = "term-line" > System ready. Establishing connection to Claude Code Env...</ div >
< div class = "term-line" > Installing plugins via marketplace...</ div >
< div class = "term-line term-accent" > claude plugin install caveman@caveman</ div >
< div class = "term-line" style = "margin-top: 16px;" > Trigger the protocol:</ div >
< div class = "term-line term-accent" > /caveman</ div >
< div class = "term-line" > Me ready.</ div >
< div class = "term-input-row" >
< span class = "term-accent" > ❯ </ span >
< input class = "term-input" id = "cli-input" type = "text" autocomplete = "off" spellcheck = "false" placeholder = "Enter prompt or impact surface anywhere to bonk..." >
</ div >
</ div >
</ div >
</ section >
< footer class = "footer" >
< div > Built by < a href = "https://github.com/JuliusBrussee" target = "_blank" > Julius Brussee</ a > . See also: < a href = "https://revu.cards" target = "_blank" > Revu</ a > .</ div >
< div > MIT License. Operational.</ div >
</ footer >
< script >
// --- Ambient Cursor Glow ---
const glow = document . getElementById ( 'cursorGlow' );
document . addEventListener ( 'mousemove' , ( e ) => {
glow . style . transform = `translate(calc( ${ e . clientX } px - 50%), calc( ${ e . clientY } px - 50%))` ;
});
// --- Marquee Population ---
const items = [
2026-07-03 13:07:25 +02:00
{ k : "TOKENS_SAVED" , v : "65%" }, { k : "ACCURACY" , v : "100%" },
2026-04-06 01:57:03 +02:00
{ k : "LATENCY_DROP" , v : "3x" }, { k : "VIBES" , v : "OOG" },
{ k : "PRICE" , v : "$0.00" }, { k : "DEPENDENCIES" , v : "NONE" }
];
const track = document . getElementById ( 'marqueeTrack' );
const marqueeHTML = [... items , ... items , ... items ]. map ( i => `<div class="marquee-item"> ${ i . k } <span> ${ i . v } </span></div>` ). join ( '' );
track . innerHTML = marqueeHTML ;
// --- Copy Install ---
function copyInstall ( btn ) {
navigator . clipboard . writeText ( 'npx skills add JuliusBrussee/caveman' );
btn . textContent = 'Copied' ;
btn . style . background = 'var(--accent)' ;
btn . style . color = '#000' ;
setTimeout (() => {
btn . textContent = 'Copy' ;
btn . style . background = 'var(--text-primary)' ;
}, 2000 );
}
// --- Diff Toggle ---
function setDiffMode ( mode , btn ) {
document . querySelectorAll ( '.toggle-btn' ). forEach ( b => b . classList . remove ( 'active' ));
btn . classList . add ( 'active' );
const body = document . getElementById ( 'diffBody' );
if ( mode === 'diff' ) {
body . innerHTML = `<span class="diff-strike">"The reason your React component is re-rendering is likely because you're creating a</span> <span class="diff-keep">New</span> object ref<span class="diff-keep">erence on</span> each render <span class="diff-strike">cycle. When you pass an</span> inline object <span class="diff-strike">as a</span> prop<span class="diff-strike">, React's shallow comparison sees it as a different object every time, which triggers a</span> = new ref = re-render. <span class="diff-strike">I'd recommend using</span> <span class="diff-keep">Wrap in <code>useMemo</code></span><span class="diff-strike"> to memoize the object."</span>` ;
} else {
body . innerHTML = `<span class="diff-keep">"New object ref each render. Inline object prop = new ref = re-render. Wrap in <code>useMemo</code>."</span>` ;
}
}
// --- Stealth Bonk System ---
let bonkCount = 0 ;
const bonkVal = document . getElementById ( 'bonkCount' );
document . addEventListener ( 'click' , ( e ) => {
// Prevent bonk on interactive elements
if ( e . target . closest ( 'a' ) || e . target . closest ( 'button' ) || e . target . closest ( 'input' )) return ;
bonkCount ++ ;
bonkVal . textContent = bonkCount ;
bonkVal . classList . add ( 'bonk-flash' );
setTimeout (() => bonkVal . classList . remove ( 'bonk-flash' ), 150 );
});
// --- CLI Interactions ---
const cliInput = document . getElementById ( 'cli-input' );
const termBody = document . getElementById ( 'termBody' );
cliInput . addEventListener ( 'keydown' , ( e ) => {
if ( e . key === 'Enter' && cliInput . value . trim ()) {
const val = cliInput . value . trim ();
const row = document . createElement ( 'div' );
row . className = 'term-line' ;
2026-06-01 21:04:58 +02:00
// SECURITY FIX: Create DOM elements safely to prevent XSS
const prompt = document . createElement ( 'span' );
prompt . className = 'term-accent' ;
prompt . textContent = '❯ ;
const commandText = document . createElement ( 'span' );
commandText . textContent = ` ${ val } ` ; // textContent automatically escapes HTML
row . appendChild ( prompt );
row . appendChild ( commandText );
2026-04-06 01:57:03 +02:00
cliInput . parentElement . before ( row );
const res = document . createElement ( 'div' );
res . className = 'term-line' ;
res . style . color = 'var(--text-tertiary)' ;
if ( val . toLowerCase () === 'help' ) res . textContent = "Commands: npx skills add JuliusBrussee/caveman" ;
else res . textContent = "Input received. Caveman processing... Done. Few words used." ;
cliInput . parentElement . before ( res );
cliInput . value = '' ;
termBody . parentElement . scrollTop = termBody . parentElement . scrollHeight ;
}
});
// --- Scroll Reveals ---
const observer = new IntersectionObserver (( entries ) => {
entries . forEach ( e => { if ( e . isIntersecting ) e . target . classList . add ( 'visible' ) });
}, { threshold : 0.1 });
document . querySelectorAll ( '.reveal' ). forEach ( el => observer . observe ( el ));
</ script >
</ body >
</ html >
