UI Refactor & Playback Stability

Summary

This cycle focused on a full playback-side UI polish and increase interaction reliability. I tried to to make the screen feel production-ready: cleaner visual hierarchy, predictable controls, and fewer layout artifacts. The old design was a mess.

UI Refactor Progress (I had AI write these changes)

• Refined playback window composition so the title bar and code surface feel like one connected component.
• Removed the “double-box” look by flattening the inner frame treatment under the title bar.
• Improved line-number gutter placement and visual balance.
• Made playback title editable inline (code.js — bash), with better typing behavior and no caret jump while editing.
• Simplified settings sidebar by removing unused/low-value controls:
  • Window Controls
  • Drop Shadow
  • Export Settings block
• Removed the non-working Tpyr.wait(ms) tip in the bottom-right info panel.

Playback Interaction Improvements

• Reworked playback resizing behavior:
  • Resize no longer causes the window to drift/move unexpectedly.
  • Edge hit-testing now respects true bounds and uses tighter handle sensitivity.
  • Horizontal scroll behavior improved so line numbers stay visually fixed while code scrolls.
• Play/Pause control reliability fixed:
  • Migrated pause/resume handling to the Typed.js-compatible control path.
  • Prevented accidental auto-complete jumps by constraining typing advancement behavior.

Rendering & Content Behavior

• Restored continuous line numbering and default-on line number state.
• Added playback horizontal overscroll behavior with hidden scrollbar for overflowed lines.
• Wired font-family selector into runtime theme/render state so selection updates are reflected in playback.

I finished the project and this is my first devlog :(

Code Typer

Code Typer is a browser-based typing simulator that turns real source code into a smooth playback you can export as looping GIFs. Paste or type code, preview the animation, and save GIFs locally or to the built-in compilation library.

Features

• Play back code typing with precise millisecond control over the cursor speed.
• Insert non-blocking pauses with Tpyr.wait() directives that are ignored by the output text.
• Automatic trimming keeps playback performant during long sessions without flashing the cursor to the top.
• Adjustable stage width, minimum height, and reset height when you need roomy frames.
• Multiple color themes tuned for the custom highlight map.
• Optional line numbers render in the live stage and exported GIFs with a single toggle.
• Override syntax detection with a searchable language picker when auto-detect gets it wrong.
• Export ready-to-share GIFs or compile them into a temporary library without downloading immediately.

Development Notes

The project is framework-free and ships static assets only:

• main.js holds the playback controller, highlight mapping, wait directive parser, and GIF export pipeline.
• styles.css styles the layout, stage controls, and compilation panel.
• index.html wires everything together and pulls in dependencies from public CDNs (Typed.js, Highlight.js, gif.js).

Clone or open the folder with any static server to test locally. No build step is required.