Try the Stream Slider Demo

Try the Stream Slider

Explore every tab and try the controls with sample content—no login required.

12-hour private demoFull editing is enabled. Upload up to 10 images or sounds in total; all temporary work and uploaded files are removed when the timer expires.
Time remaining12:00:00
Open output
Create an account for permanent saving
OBS SETUP

How to add your stream design to OBS

Use the private Browser Source URL below. Your current design and future saved changes will appear through this source.

Open stream output

Keep this URL private. Anyone with it can view the stream output.

Browser Source width1080
×
Browser Source height1920
  1. 1
    Open the correct scene in OBS

    Select the Scene where you want your FlashNFunky stream design to appear.

  2. 2
    Add a new source

    In the Sources panel, click the + button and choose Browser.

  3. 3
    Create the Browser Source

    Select Create new, name it something recognisable such as FlashNFunky Stream, then click OK.

  4. 4
    Paste your stream URL

    Delete the example address in the URL field and paste the private URL shown above.

  5. 5
    Enter the matching dimensions

    Set Width to 1080 and Height to 1920. These must match the dimensions in this app’s Settings tab.

  6. 6
    Enable sound control when required

    If you use sound effects, tick Control audio via OBS. You can then control its volume from the OBS Audio Mixer.

  7. 7
    Finish and position it

    Click OK, then resize or position the Browser Source on your OBS canvas. For a portrait Whatnot stream, the usual app dimensions are 1080 × 1920.

Not seeing your latest changes?Right-click the Browser Source, open Properties, then click Refresh cache of current page.

OBS Settings

Preview
×

Enter the exact width and height used in your OBS Browser Source. For Whatnot portrait streams, use 1080 × 1920. Enable Control audio via OBS if you use sounds.

Website attribution

Create your own streaming app like this on FLASHNFUNKY.COM

This notice is included with your current plan. Attribution removal is available on eligible plans.

LIVE EDITING

Edit the preview for quick text updates and layout control. Use the other tabs for images, backgrounds and themes.

1 selected

Drag to move · Shift-click to select more · Shift-drag empty space to box-select · Double-click text to edit · Ctrl+Z to undo

Product sliders

Keep separate product lists and Dropbox folders, then switch which slider is live in OBS.

Automatic product names

Example: enter TOY to create TOY #1, TOY #2 and continue numbering future uploads.

Saved product lots

Back up this slider’s image order, product names, prices, tub locations and visibility so it can be restored later.

Search products

Build a temporary live slider from matching products without moving or copying the originals.

No product search is currently live.

Product Slider

The slider always remains available here, even when hidden from the stream.

Products

Drag the slider directly in the preview to position it.

Add products

Export active slider to Whatnot

Creates a Whatnot-compatible CSV using each toy’s name, price, one photo and tub location. Whatnot requires Category, Sub Category, Type, Condition and Shipping Profile values to exactly match its current template. Open the official values/template.

The slider and OBS continue showing only the clean product name, price and photo. The tub code is exported in the Whatnot title and SKU so you can identify the storage tub after a sale.

Dropbox folder

Connect Dropbox and enter the folder path containing your product images.

Ticker

The ticker always remains available here, even when hidden from the stream.

Drag the ticker directly in the preview to position it.

Color Options

Choose solid section colours or use an editable two-colour blend.

Colour blend

Used by the live badge and any section with its blend option enabled.

Canvas background
Header background
Product background
Ticker background

Changes appear here and save automatically to OBS.

Background slideshow

Add up to 20 images, GIFs or videos. One background stays static; two or more automatically become a slideshow.

Drop background files here

Preview the complete slideshow as you edit.

Images / GIFs

Upload one file or select several at once. Up to 10 can be shown, hidden, resized and positioned independently.

Shapes

Add colour blocks, circles, lines and other shapes. Change the fill, outline, size and rotation, then drag them into position.

Text Boxes

One text box is shown initially. Add more only when needed, up to 10 independent boxes.

Drag to move · Double-click text to edit

Text Areas

One multi-line text area is shown initially. Add another only when longer information needs a separate layer.

Drag to move · Double-click text to edit

Animate

Animate text or uploaded images. Choose None to return an item to normal.

Animations update automatically in LIVE EDITING and OBS.

Media library

Upload images, GIFs, videos or audio once, then reuse them later. Your library has a 200 MB total limit.

0 MB / 200 MB

Tables

Build a reusable list of names, teams or groups. This is a display tool only—there is no random draw or winner selection.

Saved lists

Drag the table in the preview to position it. Changes save automatically to OBS.

Teams

Available teams are coloured, unavailable teams are greyed out, and hidden teams stay reusable without appearing in OBS. Double-click a team in the preview to hide it quickly.

Drag the team board to position it. Double-click a logo to hide that team.

FAQs

How do I create my own team set?
  1. Use Hide, Show, or click a team card to choose which teams are available.
  2. Type your own centred heading in Board heading.
  3. Add any custom teams and logos you need.
  4. Open Save or load a team set, enter a set name, and select Save current set.
How do I reuse a saved set?

Choose it under Saved team sets and select Load. Its teams, visibility choices, availability states, logos, and heading are restored.

What is the difference between unavailable, hidden, and deleted?

Unavailable stays visible but greyed out. Hidden disappears from OBS and can be restored with Show. Delete removes it from the current set.

How do I restore the NBA list?

Select Restore current NBA teams to rebuild the full bundled 30-team list. Copying logos to Media Library is optional.

Layers

Drag layers on the left to place items in front or behind, like Photoshop. The top layer appears in front.

Select a layer, then drag it in the preview to position it.

Live effect controls

Effects appear above every other item in LIVE EDITING and OBS within a few seconds.

Effect settings

The focus point controls where explosions begin and where confetti is released. Set both to 50% for the centre.

Trigger an effect to see it here and in OBS.

Sound controls

Upload your own sound, then press Play to send it to the app preview and OBS. Enable Control audio via OBS in the Browser Source properties.

MP3, WAV, M4A, AAC and OGG files are supported. Demo uploads count toward the temporary 10-file limit and are deleted when the timer expires.

Stock sound library

Choose which administrator-provided sounds appear in your controls.

Saved Layouts

Save this design or quickly load one you made earlier.

Starter Themes

Load Theme uses the complete saved design. Load Theme with my content keeps your uploaded images and text while applying its styling.

Enlarged product