Video summary

Are we cooked? Claude Fable is out of hand.

Main summary

Key takeaways

Technology

What the video set out to test

  • A “vibe coding” vs “senior developer” style prompt/AI workflow challenge: recreate a specific animated UI button (from a Twitter/X post by Raul Drunka) using AI/code generation.

  • Two builders compete in a timed format:

    • Wes: 10-minute build + 10-minute check-ins, using AI/vibe coding and voice dictation
    • Randy (“producer Randy”): newer to coding, mostly video/script automation, using AI-driven text-to-code workflows
  • End scoring is based on:
    1. Aesthetics: how closely the replica matches the original button video (visuals + animations)
    2. Code quality/scalability: whether AI-generated code is maintainable and works across sizes/responsive scenarios
    3. Deployment/Interactivity: final deliverable must be a public URL where the button is usable

The UI/product features they implemented (key technical concepts)

They reproduced a Windows-like monochrome blue mosaic button with multiple layered effects.

Mosaic background generation

  • A JavaScript canvas approach to generate a grid of square tiles (“mosaic”).
  • Parameters explicitly referenced:
    • tile size
    • gap
    • grid dimensions
    • blue color ranges
  • In Randy’s case, the implementation becomes very heavy DOM-based (called out during evaluation).

Hover behavior

  • Hover causes the button to lighten/illuminate, affecting:
    • the surface
    • the grid lines between tiles
  • Includes a white/glow component and a more complex feel described as:
    • “yaw/skew”
    • side-to-side skewing
    • subtle 3D tilt that changes with cursor position
  • They iteratively adjust:
    • timing
    • brightness
    • translucency
    • easing to match the original

Mouse-position-driven effects

  • Tracks cursor position and injects X/Y values into CSS variables to drive effects.
  • Uses absolute positioning for the ripple/glow layer rather than advanced layout features.
  • Mentions potentially using CSS anchor position, but defaults to simpler methods.

Click animation

  • On click, a ripple/waterlike wave radiates outward from the center, with tweaks to:
    • opacity
    • width
    • speed
  • Also adds a secondary “explosion”/ring-like glowing element, gated to the click event.

3D illusion

  • Uses CSS 3D transforms including:
    • perspective
    • preserve-3D
    • rotateX/rotateY-style behavior to tilt based on cursor corner
  • Iteration problems included:
    • jitter
    • “jerky” motion
    • rendering artifacts (e.g., too many decimals / pixel rounding)

Layering approach

A recurring theme: the look comes from stacked layers, such as:

  • base mosaic colors
  • top overlay/glow that dissolves or blends away on hover
  • inner shadow / embossed effects
  • radial gradient/vignette-like shading

Tooling/workflow used in the build

  • AI code generation in a local repo using a starter template (HTML/CSS modified via prompts)
  • Voice dictation to prompt the AI (speech-to-text mentioned as a workflow booster)
  • Claude Desktop / Cloud CLI concepts referenced (Claude specifically mentioned)
  • Fable used as the dev server/live preview system
  • Deployment/publishing:
    • Cloudflare
    • Claude artifact page used for quick “public links” for demos
    • sharing links via artifact page permissions/access controls

Major evaluation/iteration problems observed

Prompting limitations / “iteration hell”

  • Small UI details (e.g., exact hover behavior per cell, ripple decay, vignette distribution, shadow geometry) are hard to describe precisely in words.

Rendering/performance quirks

  • Base64 image injection for the mosaic caused rendering issues. Switching to canvas blob URLs was proposed (and partially fixed).
  • Hover/click transitions produced artifacts/jitter until:
    • math was adjusted (e.g., rounding)
    • transform setup was corrected

Hover “settling back”

  • Wes’s version reportedly did not fully revert on mouse-out (hover effect lingered).

Border radius fidelity

  • “Squirle” was mentioned as a style request (interpreted as nonstandard rounded corners).
  • Wes allegedly didn’t achieve the intended “squirle” behavior.
  • Randy also struggled to match it in Firefox, with browser differences impacting results.

Scoring outcomes (final judgments)

Wes’s score: 3.5 / 5

  • Positives
    • Button concept mostly there
    • Some effects present
  • Negatives
    • hover doesn’t revert properly
    • missing/insufficient top bevel / protrusion feel
    • tilt too exaggerated and not subtle/eased enough
    • hover looks more like a flat white box than “reveal/see-through” over the mosaic layers

Randy’s score: 4 / 5 (wins by 0.5)

  • Positives
    • closer resting state
    • strong animation feel on hover overall
    • better match and polish
  • Negatives / tradeoffs
    • background implementation becomes extremely DOM-heavy (quoted as ~660 <i> tags with inline styles)
    • browser/render differences around “squirle” rounded-corner behavior
    • some color/brightness mismatches (top too white; hover mouse area too bright/wrong composition)
  • Overall verdict: more accurate and polished despite less “clean” code structure.

Cost comment (for fun/credibility)

  • Randy humorously mentions $745 to get the button via agent usage (framed as compute/tool cost).

Main speakers / sources

  • Wes Boss — builder; senior-style prompt approach using Claude + vibe coding + voice dictation
  • Randy Recctor / Producer Randy — builder + video producer/editor; uses AI scripting/workflows
  • Syntax producer / host voice — questioning/directing the challenge; gives grading prompts
  • Source UI reference: Raul Drunka — the original Twitter/X button video they recreate

Original video