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
[bandstand_player-]
How it works
MP3, artwork, video, lyricsโฆ
/bandstand/v1/tracks
[bandstand_player-]
Tracks are loaded asynchronously via the REST API. No page reload is needed when tracks are added or reordered in the admin.
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โฆ 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
How scroll-driven playback works
sticky section height
0 โ N frames
<canvas> 2D
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.
Overlay Types
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
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.
Version
1.2.5
WordPres
6.0+
PHP
7.4+
Licence
GPL-2.0+
Installation & Quick Start
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
Slide
Zoom & Scale
Rotate & Flip
Bounce
Blur & Light
Special
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
CSS Class Method
Animate any existing theme element without using the FlowText block โ add classes directly to any HTML element.
Animation type (prefix: tap-)
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-words (split by words)
Trigger
(default: fires on scroll into view)
Timing
tap-delay-200 (initial delay in ms)
tap-threshold-20 (fire at 20% viewport height, 0โ90)
Repeat & direction
tap-reverse tap-alternate tap-replay
Easing
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
1.2.0
1.1.0
Coolshed Labs โ WordPress Plugins ยท All plugins licensed GPL-2.0+