Coolshed Labs

Plugin Documentation

Installation guides, feature references, and technical details for each plugin.

Bandstand MP3 Player Pro

A WordPress audio player for musicians and independent artists. Embeds a full-featured streaming player via a single shortcode โ€” with EQ visualisation, synced lyrics, social sharing, fan likes, gated downloads, and cast support.

Version

1.6.7

Requires

WordPress 5.0+

PHP

7.4+

Licence

GPL-2.0+

Shortcode

[bandstand_player-]

Installation

1
Upload plugin zip
Plugins โ†’ Add New โ†’ Upload Plugin
2
Configure settings
Bandstand โ†’ Settings
3
Add tracks
Bandstand โ†’ Tracks
4
Embed shortcode
[bandstand_player-]

How it works

WordPress Media Library
โ†’
Track post type
MP3, artwork, video, lyricsโ€ฆ
โ†’
REST API
/bandstand/v1/tracks
โ†’
Front-end player
[bandstand_player-]

Tracks are loaded asynchronously via the REST API. No page reload is needed when tracks are added or reordered in the admin.

.vtt .srt
Supported lyric formats

EQ Visualiser Modes

Wave

Oscilloscope waveform. Baseline pinned to the scrubber line.

Bars

Frequency spectrum bars with cap highlights. Colour mode: Spectrum or Accent.

Mirror

Symmetric bar reflection. Centre line aligned to the scrubber position.

Features

  • Continuous audio playback via HTML5 <audio>
  • Play, pause, previous, next controls
  • Shuffle and repeat modes
  • Scrubber / seek bar with elapsed and total time display
  • Mini player โ€” fixed to the viewport bottom; playback continues while scrolling
  • Automatic track advance at end of queue
  • Deep-link track selection via ?bs_track=<id> URL parameter
  • Cast button โ€” cast to Google Cast (Chromecast) or Apple AirPlay directly from the player controls
  • Full-width hero card โ€” edge-to-edge within the player container
  • Artwork image as card background (blurred, cover-fit)
  • Background video โ€” looping video that plays behind the EQ (replaces artwork when set)
  • Smooth crossfade between tracks
  • Animated gradient overlay with user-configurable colour, opacity, type, and angle
  • “Now Playing” status indicator with animated pulse dot
  • Large track title with display font; artist name below
  • Google Cast (Chromecast) โ€” the Cast button appears automatically in browsers that support the Cast API (Chrome on desktop and Android); listeners can send audio to any Chromecast or Google-enabled speaker on the same network
  • Apple AirPlay โ€” on Safari for iOS and macOS the native AirPlay picker appears, allowing listeners to route audio to AirPlay-compatible speakers, Apple TV, or HomePod
  • Both controls use the browser’s native casting APIs โ€” no additional app or plugin is required on the listener’s device
  • The cast button is displayed in the player controls area and only rendered when the listener’s browser reports cast capability
  • Drag-to-reorder in the admin โ€” order reflects live on the player
  • Track number, title, artist, duration, like button, and action icons per row
  • Accent-colour left bar and highlight on the currently playing track
  • EQ animation icon on the active row
  • Track icons always visible: 65% opacity on inactive rows, 100% on the current track
  • Share button per track with a modal containing a pre-filled link and message
  • One-click copy of the shareable URL
  • Social share buttons: X/Twitter, Facebook, WhatsApp, Email
  • Customisable share message with {title} and {artist} placeholders
  • Each track has a deep-link URL: ?bs_track=<id>
  • Like button on the now-playing card and per tracklist row
  • Session-gated โ€” one like per track per browser session
  • Like count displayed on the card with toast notification
  • Three heart styles: classic filled โ™ฅ, outline โ™ก, bold red โค
  • Admin popularity table with bar graph, per-track counts, bump controls, and reset buttons
  • Download button in the brand bar above the card
  • Gated download modal โ€” prompts the listener to support the artist before downloading
  • Honesty / honour-system bypass link for returning supporters
  • Per-track download file โ€” can differ from the streaming MP3 if needed
  • Configurable modal message, button labels, and window width
  • Attach a WebVTT (.vtt) or SRT (.srt) file to any track via the media library
  • Bandstand parses the cues and displays the active lyric line in real time on the now-playing card
  • Enable or disable globally in the Lyrics settings tab
  • Band logo upload (PNG with transparency recommended)
  • Player title with show/hide toggle
  • Accent colour picker โ€” applied to EQ, progress bar, buttons, and highlights
  • Display font and body font selectors: theme fonts, Bandstand bundled fonts, or system fonts
  • Bundled fonts: Fraunces (serif display) and DM Mono (monospace body)
  • Dark-mode design system with CSS custom properties throughout

Settings are organised across five tabs in Bandstand โ†’ Settings.

General Styles

Band logo, player title, accent colour, EQ style (Wave/Bars/Mirror), EQ colour mode (Spectrum/Accent), EQ opacity, card gradient overlay, display font, body font, tracklist label.

Sharing

Share message template, like button toggle and heart style, donation section (URL, caption, button label), Track Popularity table.

Modals

Track Info pop-up (enable, window width, empty notes message), Download pop-up (enable, icon, message, button labels, honesty link text, window width).

Lyrics

Enable or disable the synced lyric display globally.

Shortcode

Copy-to-clipboard helper for the

Loadingโ€ฆ
โ€”
0:00
0:00

Loadingโ€ฆ

Share Track
โ€”
โ€”
Download Track
Support the music to download this track.

Already donated? Click here to download

shortcode.

Per-Track Fields

๐ŸŽต

MP3 file

Uploaded via the WordPress media library. Used for streaming playback.

๐Ÿ–ผ

Artwork

Square image shown as the now-playing card background, blurred and cover-fit.

๐ŸŽฌ

Background video

Looping video that plays behind the EQ, replacing the artwork when set.

๐ŸŽค

Artist / Genre / Year / BPM

Displayed in the Track Info modal alongside freeform HTML notes.

๐Ÿ“„

Lyrics file

Attach a .vttor .srtfile for real-time synced lyric display.

โฌ‡

Download file

Separate file served on download โ€” can differ from the streaming MP3.

FlowScroll โ€“ Sequence Scroller

A Gutenberg block plugin that maps scroll position to an image sequence โ€” with animated text, button, and image overlays. Configured entirely through a built-in editor panel; no shortcodes or coding required.

Version

3.2.4

WordPres

6.0+

PHP

7.4+

Editor

Gutenberg only

Licence

GPL-2.0+

Installation & Quick Start

1
Upload & activate
Plugins Add New Upload Plugin
2
Add the block
Search "FlowScroll" in the block inserter
3
Create a sequence
FlowScroll Sequences upload frames
4
Configure
Open the configure panel and add overlays
5
Preview & publish
Check desktop and mobile previews

How scroll-driven playback works

Visitor scrolls
โ†’
Scroll % calculated
sticky section height
โ†’
Frame index mapped
0 โ†’ N frames
โ†’
Canvas renders frame
<canvas> 2D
โ†’
Overlays animate
by frame timing

Frames are drawn to a <canvas>element to prevent the GPU-texture eviction flash that affects CSS background-imageimplementations. All frames preload before the sequence becomes interactive.

13
Entrance animation types
3
Overlay types
โˆž
Sequences per page
2
Preview modes

Overlay Types

T

Text

Heading (h1โ€“h6) or paragraph. Full typography controls including font size, weight, letter spacing, word spacing, line height, max width, colour, and opacity.

โฌก

Button (CTA)

Link URL, label, style (Solid / Outline / Ghost), colours, padding, and size. Optional modal mode โ€” opens a freeform HTML overlay instead of navigating.

๐Ÿ–ผ

Image / Parallax

PNG, SVG, or GIF layer. Optional parallax depth movement with configurable direction and speed. Fullscreen mode available per device.

Timeline Editor

๐Ÿ’Ž

Keyframe diamonds

Drag Start, Intro end, Hold end, and Out end to set timing. Values sync live to the form inputs.

๐Ÿ‘

Eye toggle

Show or hide any overlay in the preview and on the live site without deleting it.

๐Ÿ“

Compact layout

Tracks are 18 px tall. Complex 10-overlay sequences fit without excessive scrolling.

Entrance Animation Types

Fade
Slide Up
Slide Left
Slide Right
Zoom In
Zoom Out
Zoom Inโ†’Out
Zoom Outโ†’In
Words
Letters
Char Flop
Glow Pulse
Typewriter

All overlays support an optional exit animation. Exit easing uses a squared curve that holds opacity high before dropping away.

Full Feature Reference

  • Canvas rendering โ€” frames drawn to <canvas>, preventing GPU-texture eviction flash
  • Preloader with progress bar โ€” all frames fetched before the sequence becomes interactive
  • Configurable scroll height โ€” set how many viewport-heights the sticky section occupies
  • Configurable frame count โ€” maps scroll progress to frame index accurately
  • Still-image mode โ€” treat the sequence as a frozen image with overlays that animate on scroll
  • Multiple sequences per page โ€” each FlowScroll block is fully independent
  • Visual position grid โ€” drag a crosshair to place overlays anywhere in the frame
  • Snap lines at horizontal and vertical centre and thirds
  • Percentage-based positioning โ€” resolution-independent across all screen widths
  • Independent desktop and mobile positions for each overlay
  • Full-viewport layer that sits above frames and below text overlays
  • Gradient types: Linear (top-bottom, bottom-top, left-right, diagonals, custom angle), Radial, Solid
  • Two independently configurable colour/opacity stops
  • Configurable radial centre point and angle for linear gradients
  • Type: None, Drop shadow, or Glow
  • Strength slider (0โ€“100%) โ€” controls shadow opacity/intensity
  • Size slider (0โ€“100%) โ€” scales spatial spread independently of strength
  • Custom shadow colour picker
  • Full animation runs on mobile by default, with its own font sizes and positions per overlay
  • Disable on mobile โ€” replaces the animated section with a static 16:9 poster (first frame) on screens โ‰ค767 px
  • Reduced-motion โ€” respects prefers-reduced-motion: reduce; section becomes a static image
  • Mobile preview: 390ร—844 phone frame at 460 px tall in the admin editor
  • Drag to reorder overlay cards and timeline order
  • Duplicate any overlay (all settings and timing included) with one click
  • Delete an overlay permanently from the card header
  • Auto-collapse โ€” opening one card collapses all others
  • Eye toggle โ€” hide/show without deleting; persists across saves
  • All settings saved via the WordPress REST API to a custom database table โ€” no post meta pollution
  • Auto-dirty detection โ€” save button shows “Unsaved changes” when the config has been modified
  • Each sequence has a unique ID referenced by the Gutenberg block

Image Format & Sequence Guide

๐Ÿ“ธ

JPEG

Best for photographic sequences โ€” smaller files, faster loading. No transparency support.

๐Ÿ–ผ

PNG

Use when transparency is required. Larger file sizes โ€” keep frame count lower.

๐ŸŽž

Recommended frame count

30โ€“150 frames works well. 60โ€“90 frames at high quality is a good starting point. More frames = smoother animation but more download weight.

๐Ÿ“ฑ

Multiple sequences

Each FlowScroll block is fully independent. Place as many as needed on a single page or post.

FlowNav

A WordPress plugin that renders a fully configurable fixed header bar, independent of the active theme. Includes scroll-aware colour transitions, logo swapping, mega menu with rich cards, a CTA button, and WooCommerce icons.

Version

2.0.9

WordPres

5.4+

PHP

7.4+

Licence

GPL-2.0+

Installation & Quick Start

1
Upload & activate
Plugins โ†’ Add New โ†’ Upload Plugin
2
Assign a menu
Appearance โ†’ Menus โ†’ Primary location
3
Hide theme header
Behaviour tab โ†’ Override native header
4
Set colours
Appearance tab โ†’ Default and Scrolled states

Scroll-Aware Colour States

Default state โ€” top of page
  • Background colourโ€” any colour + opacity
  • Text colourโ€” independent of scrolled state
  • Logoโ€” upload a separate default logo
  • Typically transparent or semi-transparent over a hero

scroll โ†“

โ†’

Scrolled state โ€” after threshold
  • Background colourโ€” any colour + opacity
  • Text colourโ€” independent of default state
  • Logoโ€” upload a separate scrolled logo
  • Transition speed configurable in milliseconds

The threshold can be set in px or vh, or tied to a CSS selector so the transition fires when a specific element scrolls out of view.

Full Feature Reference

  • Fixed header bar โ€” stays at the top of the viewport at all times
  • Completely independent of the theme โ€” works alongside any WordPress theme
  • Automatically adds padding-top to the page body so content is never hidden beneath the header
  • Smooth hide-on-scroll โ€” slides up when scrolling down, reappears when scrolling back up
  • Optional threshold mode โ€” only hides after a set scroll distance
  • Upload separate logos for Default and Scrolled states
  • Logos crossfade smoothly on scroll transition
  • Configurable logo scale (% of natural size) โ€” resize without editing CSS
  • Header shrink โ€” header compresses to a smaller configurable height after the scroll threshold; logo scales proportionally

Triggered on hover over any top-level menu item tagged ssh-mega in Appearance โ†’ Menus.

  • Each child menu item becomes a card with image, title, and description
  • Featured image pulled automatically from the linked page
  • Cards expand slightly on hover (scale(1.03)) with a 350ms ease transition
  • Configurable card background and text colours
  • Image layout: Left (side-by-side), Top (stacked), or None (text only)
  • Image scale, body padding, title and description font sizes all configurable
  • Card width and cards per row (1โ€“6) configurable
  • Fade in/out animation at 320ms; hover grace period prevents accidental close
  • Panel centres under the triggering menu item and clamps to viewport edges
  • Card Description supports HTML: <b>, <i>, <ul>, <li>, <br>, <a>, <p>
  • Configurable label text and URL
  • Background colour, text colour, border radius, vertical padding, horizontal padding
  • Hidden automatically on mobile (below 768 px)
  • Subtle hover: slight opacity fade and upward nudge
  • Optionally shown in the mobile overlay menu
  • Hamburger icon appears at โ‰ค768 px
  • Tap opens a fullscreen overlay with the full navigation tree
  • Independent background colour and text colour for the mobile overlay
  • Supports nested sub-menus โ€” tap to expand / collapse
  • Desktop mega menu suppressed on mobile
  • Cart icon โ€” basket icon with live item count badge, links to the cart page
  • Account icon โ€” My Account link icon
  • Both icons appear alongside the CTA button and are only visible when WooCommerce is active

Behaviour

Hide on scroll, hide at threshold, scroll threshold (px or vh), hero selector, override native header.

Appearance

Default and Scrolled colours, logos, logo scale, transition speed.

Layout

Header height, content width, content padding.

Navigation

Menu location, mega menu colours, card width, cards per row, image layout, font sizes, description opacity. Includes collapsible setup instructions.

CTA Button

Label, URL, background colour, text colour, border radius, padding.

Mobile

Fullscreen overlay background and text colours.

WooCommerce

Enable cart icon and account icon.

  • Inline CSS variables output in <head> โ€” no flash of unstyled header on first paint
  • Static option cache โ€” get_option() called once per request
  • Asset version includes file modification time โ€” busts CDN and browser cache on deploy
  • Custom admin_post save handler โ€” avoids WordPress Settings API recursive hook issue on some hosts
  • Tested with: Astra, GeneratePress, Hello Elementor, Twenty Twenty-Four

Mega Menu Setup

1
Enable CSS Classes
Appearance โ†’ Menus โ†’ Screen Options โ†’ tick CSS Classes
2
Tag the menu item
ssh-mega
3
Add child items
Each child item becomes a card in the mega panel
4
Fill card fields
Expand each child โ†’ fill Card Title and Card Description

FlowText

A Gutenberg block plugin for animating heading and paragraph text. Supports scroll, load, hover, click, and scroll-linked triggers. Split text mode animates word by word or character by character. Also works via CSS classes on any existing theme element โ€” no block required.

Version

1.2.5

WordPres

6.0+

PHP

7.4+

Licence

GPL-2.0+

Installation & Quick Start

1
Upload & activate
Plugins โ†’ Add New โ†’ Upload Plugin
2
Add the block
Search "FlowText" in the block inserter
3
Choose animation & trigger
Configure in the block sidebar
4
Publish
Animation runs automatically on the front end

Trigger Types

๐Ÿ“œ

Scrol

Fires once when the element enters the viewport. Configurable threshold (0โ€“90%). Optional replay on every scroll entry.

โšก

On Load

Fires immediately when the page loads, regardless of scroll position.

๐Ÿ–ฑ

On Hover

Fires on mouse enter. Resets and replays each time the cursor enters the element.

๐Ÿ”—

Scroll Linked

Animation progress tracks scroll position in real time โ€” the element animates forwards as you scroll down and backwards as you scroll up.

๐Ÿ‘†

On Click

Fires when the element is clicked.

All Animation Types

Fade

Fade In
Fade In Up
Fade In Down
Fade In Left
Fade In Right

Slide

Slide In Up
Slide In Down
Slide In Left
Slide In Right

Zoom & Scale

Zoom In
Zoom In Bounce
Zoom Out
Scale X
Pop

Rotate & Flip

Rotate In
Rotate Down Left
Flip In X
Flip In Y

Bounce

Bounce In
Bounce In Up
Bounce In Down

Blur & Light

Blur
Pixelate
Glow
Spotlight
Neon Glow
Rise
Stamp

Special

Typewriter
Wave
Letter Drop
Split Reveal
Glitch
Shake
Swing
Rubber Band

Split Text Mode

๐Ÿ’ฌ

Split by Words

Each word enters sequentially โ€” one at a time, no overlap. The chosen animation provides the motion for each word.

๐Ÿ”ค

Split by Characters

Each character enters sequentially with its own motion. Works with all animation types.

Timing calculation

perPartMs = Duration รท part count

Clamped to 40โ€“150ms per part

โ†“
Each part starts exactly when the previous one ends
โ†“
Zero overlap โ€” clean sequential timing

CSS Class Method

Animate any existing theme element without using the FlowText block โ€” add classes directly to any HTML element.

Animation type (prefix: tap-)

fade-in   fade-in-up   fade-in-down   fade-in-left   fade-in-right
slide-in-up   slide-in-down   slide-in-left   slide-in-right
zoom-in   zoom-in-bounce   zoom-out   scale-x   rotate-in
rotate-down-left   flip-x   flip-y
bounce-in   bounce-in-up   bounce-in-down
blur   glitch   typewriter   wave   shake   swing
rubber-band   neon   glow   spotlight   pop   rise   stamp
split-reveal   pixelate   char-flop

Split text

tap-split-chars   (split by characters)
tap-split-words   (split by words)

Trigger

tap-on-load   tap-on-hover   tap-on-click   tap-scroll-linked
(default: fires on scroll into view)

Timing

tap-duration-600   (any number, in ms)
tap-delay-200   (initial delay in ms)
tap-threshold-20   (fire at 20% viewport height, 0โ€“90)

Repeat & direction

tap-twice   tap-thrice   tap-infinite
tap-reverse   tap-alternate   tap-replay

Easing

tap-ease   tap-ease-in   tap-ease-out   tap-ease-in-out
tap-linear   tap-spring   tap-elastic
tap-ease-gentle   tap-ease-strong   tap-ease-heavy   tap-ease-expo
SettingDefaultDescription
AnimationFade In UpWhich animation to play
Tagh2HTML element (h1โ€“h6, p, span, div)
TriggerScrollWhen to fire the animation
Duration600msTotal animation time
Delay0msWait before the animation begins
EasingExpo OutMotion curve
RepeatOncePlay 1, 2, 3, or infinite times
DirectionNormalNormal, reverse, or alternate
Split ByNoneNone, Words, or Characters
Threshold10%Scroll trigger fire point (0โ€“90%)
ReplayOffRe-animate on every scroll entry
Colourโ€”Override the text colour
Font Sizeโ€”Override the font size
Text AlignLeftLeft, centre, or right
CSS Classโ€”Add extra classes to the element

FlowText registers three automatic compatibility hooks when LiteSpeed Cache is active. No configuration needed.

  • UCSS allowlist โ€” whitelists heading selectors so LiteSpeed’s critical CSS scanner does not strip heading styles
  • JS delay exclusion โ€” prevents LiteSpeed from deferring the FlowText script, which would delay animations
  • Inline critical CSS โ€” protects heading font-size and font-weight from being stripped by UCSS optimisation

Version History

1.2.5

Sequential typewriter-style timing for all split-text animations; pre-flash fix for scroll trigger.

1.2.0

anime.js integration for JS-driven per-span tweening; plugin renamed from Text Animator Pro to FlowText.

1.1.0

Initial public release as Text Animator Pro.

Coolshed Labs โ€” WordPress Plugins  ยท  All plugins licensed GPL-2.0+