Skip to main content

Glitch Collage: maximalist web design example

A free, animated glitch type for music and nightlife, rave glitch style. Every colour, text and motion setting is a runtime input.

Updated October 2026

About the Glitch Collage

The Glitch Collage is a glitch type with a rave glitch look, made for music and nightlife. It animates an RGB-split headline that slices every two seconds over scanlines, and a tap fires a big glitch. It also has keyframes you can edit in the ExodeUI timeline: an entrance and an ambient float.

Runtime inputs for the Glitch Collage

These 23 inputs, plus the replay and tap triggers, can be set from the customizer above, from the ExodeUI studio, or from your code while the element runs.

InputWhat it changesType
headlineHeadlineText
subSublineText
bgColorBackgroundColour
redColorChannel 1Colour
cyanColorChannel 2Colour
limeColorMain typeColour
blockColorBlocksColour
glitchGlitch amountNumber
radiusCorner radiusNumber
intensityScanlinesNumber
liftHover liftNumber
interactiveMouse interactionOn/off
tiltHover tilt (deg, 0 = off)Number
pressPress squishNumber
floatExtra idle float (px)Number
speedAnimation speedNumber
introEntrance animationOn/off
introStyleExtra entrance styleChoice
introDurationEntrance duration (s)Number
colorTweenColour change fade (s)Number
pageModePage backgroundChoice
pageTopPage colourColour
pageBottomPage gradient endColour

Add the Glitch Collage to React or Next.js

  1. Open an element above and set its text, colours and motion, or keep the defaults.
  2. Download the .bexode file (or the customized .exode) and put it in your public folder.
  3. Install the runtime with npm i exodeui.
  4. Render it with ExodeUICanvas and pass your text, numbers and colours as inputs.
import { ExodeUICanvas } from 'exodeui';

export function GlitchCollageSection({ data }) {
  return (
    <ExodeUICanvas
      src="/ui-trends/files/maximalism/09-glitch-collage.bexode"
      autoPlay
      style={{ width: 600, height: 400 }}
      inputs={{
        headline: data.headline,
        sub: data.sub,
        // every colour is an input too, for example a brand accent
        ...data.theme
      }}
    />
  );
}

Frequently asked questions

Is the Glitch Collage element free?
Yes. You can preview it, customize it and download the .exode and .bexode files without paying. ExodeUI also has a free Community plan for editing it in the studio.
What does the Glitch Collage do when tapped?
It fires a big glitch. You can fire the same action from code with the tap input, and replay the entrance with the replay input.
Can I change the colours and text of the Glitch Collage?
Yes. All 7 colours and every label are runtime inputs. Set them in the customizer above or pass them from your code; colour changes cross-fade.
Does it have keyframes I can edit?
Yes. The file has a keyframed entrance and an ambient float on the timeline, which you can edit in the ExodeUI Animate tab. Its own motion and interaction stay live and follow the speed input.
Does it work outside React?
The same file works with the other ExodeUI runtimes, including Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.