SCRAPLET CONTROL STUDIO ISSUE #01 LOADING APPROVED
SYSTEM ONLINE • DEFENSES ARMED
SCRAPLET

Creating Your First Overlay

This guide walks you through the step-by-step process of initializing a blank slate canvas, adding custom layered objects, and outputting your production URL for OBS.

1. Launching the Editor

All overlays live inside your centralized Scraplet Dashboard. To spin up a new design:

  1. Log into the Scraplet Dashboard.
  2. Navigate to the left navigation bar and click on Overlays.
  3. Click the + New Overlay button at the top-right corner.
  4. Give your overlay a name (e.g., Hype Overlay) and choose your target canvas resolution (Default: 1920 x 1080).
  5. Click Create & Open to load the studio interface.

2. Editor Studio Layout

The Overlay Editor workspace is divided into four primary functional zones:

Left: Elements Sidebar

Manage your layer hierarchical tree. Re-order layers to change overlap depth, lock elements to prevent accidental dragging, or toggle visibility.

Center: Visual Canvas

Your live preview board. Drag, resize, rotate, and position components directly on-screen with precise alignment helper guides.

Right: Properties Inspector

Modify granular attributes of the selected layer, such as font style, color gradients, border radii, shadow effects, and custom API event hooks.

Bottom: Sequencer Timeline

Record property changes over time, manipulate keyframe curves, or configure timeline action markers and audio sound effects.

3. Drafting and Customizing Elements

Let's add a basic container block and an animated text label to your canvas:

Add a Container Layer

Click the Container icon on the top tool bar. A default box will spawn. In the right-hand Inspector, adjust its width/height, choose a subtle backdrop color, and configure a border radius of 12px for a modern, rounded aesthetic.

Overlay some Text

Add a Text layer. Double-click the text box on the canvas to write "New Follower!". In the Inspector, navigate to the Typography section to choose a custom Google Font (such as Outfit or Inter), increase size, and set font weight to bold.

4. Saving & Fetching the Overlay Link

Once you're satisfied with your visual composition, save your progress and copy the browser source URL:

  • Press the Save (Ctrl + S) button in the top header. Your configurations will sync to the cloud.
  • Click the Copy Overlay Link icon at the top of the screen next to your overlay name.
  • Your unique link follows this pattern: https://scraplet.store/o/[your-unique-id]

Next Step: Integrate Chat Bot Triggering

To make this overlay react to chat commands or live twitch/kick events (follows, subs, bits), let's set up **Scrapbot** next.

Connecting Scrapbot →