Coolshed Labs
Documentation
Clear, step-by-step guides for every plugin. Get up and running in minutes.
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.
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
Paste
[bandstand_player] into any pageHow it works
WordPress Media Library
→
Track post type
MP3, artwork, video, lyrics…
MP3, artwork, video, lyrics…
→
REST API
/bandstand/v1/tracks
/bandstand/v1/tracks
→
Front-end player
[bandstand_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.
3
EQ visualiser modes
4
Social share channels
5
Admin settings tabs
2
REST endpoints
.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 [bandstand_player] shortcode.
REST API
| Endpoint | Method | Description |
|---|---|---|
| /wp-json/bandstand/v1/tracks | GET | Returns all published tracks with metadata |
| /wp-json/bandstand/v1/like | POST | Registers a like for a track (session-gated) |
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 .vtt or .srt file 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.
Installation & Quick Start
1
Upload & activate
Plugins → Add New → Upload Plugin
2
Create a sequence
FlowScroll → Sequences → upload frames in order
3
Add the block
Search "FlowScroll" in the block inserter
4
Configure
Open the Configure panel from the block toolbar
5
Preview & publish
Check desktop and mobile previews
How scroll-driven playback works
Visitor scrolls
→
Scroll % calculated
sticky section height
sticky section height
→
Frame index mapped
0 → N frames
0 → N frames
→
Canvas renders frame
<canvas> 2D
<canvas> 2D
→
Overlays animate
by frame timing
by frame timing
Frames are drawn to a <canvas> element to prevent the GPU-texture eviction flash that affects CSS background-image implementations. All frames preload before the sequence becomes interactive.
13
Entrance animation types
3
Overlay types
∞
Sequences per page
2
Preview modes
Overlay Types
Timeline Editor
Each overlay has four draggable keyframe diamonds to set timing.
Heading
Paragraph
Button
0
25%
50%
75%
100%
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.
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.
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
35+
Animation types
5
Trigger types
10
Easing options
2
Split text modes
Trigger Types
Scroll
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.
On Click
Fires when the element is clicked.
Scroll Linked
Animation progress tracks scroll position in real time — the element animates forwards as you scroll down and backwards as you scroll up.
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 countClamped 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.
<h2 class="tap-slide-in-up tap-split-chars tap-duration-800 tap-replay">
Animated heading
</h2>
<p class="tap-fade-in tap-on-load tap-delay-300 tap-ease-out">
Paragraph that fades in on page load
</p>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
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)
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)
(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)
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
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
tap-linear tap-spring tap-elastic
tap-ease-gentle tap-ease-strong tap-ease-heavy tap-ease-expo
| Setting | Default | Description |
|---|---|---|
| Animation | Fade In Up | Which animation to play |
| Tag | h2 | HTML element (h1–h6, p, span, div) |
| Trigger | Scroll | When to fire the animation |
| Duration | 600ms | Total animation time |
| Delay | 0ms | Wait before the animation begins |
| Easing | Expo Out | Motion curve |
| Repeat | Once | Play 1, 2, 3, or infinite times |
| Direction | Normal | Normal, reverse, or alternate |
| Split By | None | None, Words, or Characters |
| Threshold | 10% | Scroll trigger fire point (0–90%) |
| Replay | Off | Re-animate on every scroll entry |
| Colour | — | Override the text colour |
| Font Size | — | Override the font size |
| Text Align | Left | Left, 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.