Skip to content

Calm the analysis mascot and the typing log #389

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
faratech wants to merge 1 commit into from
Closed

Calm the analysis mascot and the typing log #389

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion CLAUDE.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ prerendered markup — never another route's — or hydration mismatches.

### Analyzer live view

While a run is active `pages/Analyzer.tsx` hides the uploader and wraps the page in `.analyzer-live` (viewport height minus header, minus the sticky ad bar when it is filled), so the ad row and `components/AnalysisProgress.tsx` (a container-query card: grid, face and steps resize to the space left) fit one screen. The leaderboard is placed manually (`DisplayAdSafe fixed`: 320x100, 468x60 or 728x90 by width, no `data-ad-format`), so whatever fills it cannot resize the page, and the card keeps at least 24rem. The ad row and the results list stay mounted so no ad is re-requested. A run that produced a report holds the finished card for 1.6 s, then a summary strip (stop code, likely cause from `getReportFacts`) sits above the results until "Analyze another file". The animation moves only transform, translate, scale and opacity inside the card. The mascot is an original gremlin (not OpenAI's Codex BSOD pet, whose artwork belongs to OpenAI): each stage has its own pose, `data-antic` switches it to a different antic every 8 s of the run so a long wait stays interesting, and a thought bubble, a typing log and stage particles sit around it, all in `styles.css`.
While a run is active `pages/Analyzer.tsx` hides the uploader and wraps the page in `.analyzer-live` (viewport height minus header, minus the sticky ad bar when it is filled), so the ad row and `components/AnalysisProgress.tsx` (a container-query card: grid, face and steps resize to the space left) fit one screen. The leaderboard is placed manually (`DisplayAdSafe fixed`: 320x100, 468x60 or 728x90 by width, no `data-ad-format`), so whatever fills it cannot resize the page, and the card keeps at least 24rem. The ad row and the results list stay mounted so no ad is re-requested. A run that produced a report holds the finished card for 1.6 s, then a summary strip (stop code, likely cause from `getReportFacts`) sits above the results until "Analyze another file". The animation moves only transform, translate, scale and opacity inside the card. The mascot is an original gremlin (not OpenAI's Codex BSOD pet, whose artwork belongs to OpenAI): each stage has its own pose, `data-antic` switches it to a different antic every 14 s of the run (most slots are the calm stage pose) so a long wait stays interesting without twitching, and a thought bubble, a typing log (each line types once per stage and stays) and stage particles sit around it, all in `styles.css`. Loops stay slow (1.2 s and up) and ease back and forth rather than snapping.

### BSOD AI chat

Expand Down
7 changes: 4 additions & 3 deletions components/AnalysisProgress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,9 @@ const STAGES = [
think: ['got it!', "report's ready", 'high five!'], log: ['analysis complete', 'report ready', 'scroll for the details'] },
];

// Every 8 s of the run the mascot does something else (0 = the pose of the stage); each antic has a line.
const ANTICS = [0, 1, 0, 2, 3, 0, 4, 5, 0, 6, 7, 0, 8];
// Every 14 s of the run the mascot does something else (0 = the pose of the stage, so most of the time he is calm); each antic has a line.
const ANTIC_SECONDS = 14;
const ANTICS = [0, 1, 0, 0, 2, 0, 3, 0, 0, 4, 0, 5, 0, 0, 6, 0, 7, 0, 0, 8];
const ANTIC_SAYS = ['', 'hi there!', 'just looking around...', '*yaaawn*', 'look, no hands!', 'la la la', 'ooh, what is that?', 'wheee!', 'still got it'];
const SLOW = ['still working...', 'this one is a big one', 'hang in there!'];

Expand Down Expand Up @@ -71,7 +72,7 @@ const AnalysisProgress: React.FC<AnalysisProgressProps> = ({ stage, message, sta
: stage === 'uploading' && percentage !== undefined ? `Uploading... ${percentage}%` : message || info.description;
const bar = done ? 100 : ((idx + (stage === 'uploading' ? (percentage ?? 0) * 0.009 : 0.4)) / 5) * 100;
const fact = Math.floor(elapsed / 8) % FACTS.length;
const antic = done ? 0 : ANTICS[Math.floor(elapsed / 8) % ANTICS.length];
const antic = done ? 0 : ANTICS[Math.floor(elapsed / ANTIC_SECONDS) % ANTICS.length];
const thoughts = isTakingLong ? SLOW : antic ? [ANTIC_SAYS[antic]] : info.think;

// Assistive technology hears the stage and its message, without the
Expand Down
Loading
Loading