Configurator basics
Everything you need to find your way around the configurator: the workspace, what each tab does, and how a design becomes the overlay in your scene.
How is the configurator organized?
On a computer, the screen has three columns. The tabs run down the left side and open their panel next to them. Your controller sits in the center: click any piece to select it, zoom in for detail work, and switch between Idle and Pressed above it to check how buttons look when they are held. On the right, the Your design panel lists five steps (Your controller, Colors, Name, Extras and Settings), each with its own button, and you can skip any of them. Preview and Generate link stay at the bottom of that panel, with the price of the link.
The top bar holds the name of the design, its save status, Save, Undo and Redo. Click the name to rename the design, or open its menu to reset it or start a new one. The shortcuts are Ctrl+S to save, Ctrl+Z to undo and Ctrl+Shift+Z to redo.
On a phone, the configurator opens as a guided flow in six steps, from choosing a design to checkout. Edit freely at the top switches to the full editor, although detail work is easier on a computer.
Which tab does what?
| Tab | What it does |
|---|---|
| Templates | Choose the controller (PS5, Xbox or PS4) and start from a shop design, filtered by static or animated, or from a blank controller. |
| Colors | Color the shell and each group of pieces: touchpad, face buttons, D-pad, Start and Share, Home, sticks, triggers and bumpers, with a separate color for the pressed state. |
| Text | Up to 5 text layers placed by dragging, ready-made text styles, and up to 3 fonts of your own per design (WOFF2, WOFF, TTF or OTF, up to 500 KB each). |
| Images | A library of ready-made elements, your own images (PNG, JPG or WebP up to 300 KB, transparency kept), and an image that fills the shell while the buttons stay on top. |
| Style | An animated layer cut to the shape of the controller, alternative shapes for parts such as the sticks, and light strips along the touchpad and the grips. |
| Settings | The live signal of each stick and trigger, stick travel, dead zones, trigger fill and hiding the controller when idle. These settings change only the picture, never what your game receives. |
| Preview | Exactly what your browser source will show: the controller alone on a transparent background. |
How do I preview with my own controller?
Plug in your controller and press any button. From then on, the preview follows every input while you design, so you see the pressed colors, the trigger fill and the stick movement as they will appear on stream. The Settings tab shows the raw value of each stick and trigger before dead zones, which helps to spot a drifting stick. Without a controller, the Idle and Pressed switch above the preview still shows both states.
Nothing reacts? Go through Controller not detected.
How do I save and publish my design?
- Choose Save. The first save names the design for you, and once it is saved to your account, later edits are saved automatically. You can reopen it at any time to keep working.
- Choose Generate link when the design is ready. You pay once, $4.99 for a static design or $7.99 for an animated one, then paste the link into a browser source.
- To update the overlay later, open the design again and apply the change to the same link. Only an applied change counts: a static link includes 5 and an animated link 10.
What else the link contains is covered in How Padcraft works.
What makes a design readable on stream?
- Pick the model you actually hold. Viewers who play the same game notice a PS5 layout on an Xbox stream, and the button labels would not match.
- Choose one base color. A dark shell stands out on bright arenas such as Rocket League, and a light shell reads better on dark games such as Warzone at night.
- Give pressed buttons a strong accent color, used for nothing else, so every input is obvious.
- Keep text to your channel name, in one font. A sentence is unreadable at overlay size, and two fonts on a controller look busy.
- Place your logo on the touchpad or between the sticks, as a transparent PNG.
- Keep the animation at a low opacity and a slow speed, so it never competes with your inputs.
- Check the Preview tab, then test the design against your game HUD and on a phone with the overlay placement guide before going live.
Which link settings suit which game?
The Settings tab and the settings page of each link adjust how the controller reads on stream. Settings saved on the link page apply to the same link, without copying it again. Good starting points:
| Game | Useful settings |
|---|---|
| Rocket League | Progressive trigger fill, so viewers see how long throttle and boost are held. |
| Warzone, Apex Legends, Fortnite | Stick movement toward expressive, so small aim adjustments stay visible. |
| Street Fighter 6, Tekken 8 | Strong pressed colors on the D-pad and face buttons, where motion inputs happen. |
| EA Sports FC 25 | Moderate stick movement, so skill moves drawn with the right stick read clearly. |
| Any game, between matches | Hide when idle, so the controller disappears during menus and breaks. |
Does a heavy design slow down my stream?
Everything in your overlay is drawn by the browser inside your streaming software, on every frame, on the same machine as your game. A light design costs almost nothing. A design that stacks an animated layer, large images and glowing light strips costs more.
- Keep images small. The 300 KB limit in the Images tab exists for this reason.
- One animated layer is usually enough. A second one competes with your inputs for attention and with your game for GPU time.
- After adding the overlay, open Docks, Stats in OBS during a busy moment of the game: frames missed due to rendering lag should stay at 0. The recommended OBS settings explain what to change if the scene cannot hold 60 FPS.
Plug in your controller and start from a blank controller or a shop design.
Start designing