Animated Multi-Player Selection Card

This Responsive Vue Multiplayer Select component is a playful UI pattern for game interfaces or configuration forms. It utilizes Vue’s reactivity to dynamically calculate the width of game controller illustrations, ensuring they perfectly fill the container regardless of whether 1, 2, 3, or 4 players are selected. The result is a smooth, accordian-like expansion effect.

Core Technique: Reactive CSS Calculation

The elegance of this snippet lies in how it avoids complex JavaScript animation libraries. Instead, it bridges Vue’s state with native CSS calculations.

1. Computed Style Binding

The Vue instance tracks the number of players. A computed property, playerWidth, generates a style object containing a CSS calc() string. This divides the CSS variable --card-width (defined in SCSS) by the current reactive state.

computed: {
  playerWidth() {
    // Dynamically divides the container width by the player count
    return {
      width: `calc(var(--card-width) / ${this.players}`
    }
  }
}

2. SCSS Color Mixins

To keep the HTML clean, visual variations are handled via SCSS mixins. The SVG elements (controller body, cord, button) use generic classes, which are then themed based on the parent class (e.g., .player-1, .player-2).

@mixin player-colors($background, $controller, $cord) {
  background: $background;

  // Targeting internal SVG parts
  .controller-button { fill: $background; }
  .controller-body   { fill: $controller; }
  .controller-cord   { fill: $cord; }
}

&-1 {
  @include player-colors(#b5d2fa, #2d5ff0, #6f9ddf);
}

3. Cubic Bezier Transition

The smooth expansion isn’t just a linear shift. The .player class applies a custom cubic-bezier curve to the width property. This gives the animation a “bouncy,” mechanical feel appropriate for a game interface.

.player {
  /* ... */
  transition: width 0.2s cubic-bezier(0.83, 0, 0.17, 1);
}

Browser Support

This component relies on modern but well-established CSS and JavaScript standards.

Key Technologies:

• Vue.js 2/3: Universal support.
• CSS Calc & Variables: Supported in all modern browsers.
• Flexbox: Universal support.
• Inline SVGs: Universal support.