One post tagged with "transitions"

Introduction​

One of the most delightful aspects of owning a Vestaboard is watching transitions from one message to another. The satisfying sound of the bits flipping and the visual effect as your Vestaboard transforms has always been core to the experience.

Last year, we introduced new transition options in the Vestaboard mobile and web apps, giving you control over how your messages are animated. Today, we're excited to announce that you can now control these transitions programmatically through the Cloud API.

The New Transition Endpoints​

We've added two new endpoints to the Cloud API that let you get and set transition preferences for your Vestaboard.

GET /transition​

Retrieve your current transition settings:

await fetch("https://cloud.vestaboard.com/transition", {
  headers: {
    "Content-Type": "application/json",
    "X-Vestaboard-Token": "YOUR_API_KEY",
  },
  method: "GET",
}).then((res) => res.json());

This returns:

{
  "transition": "wave",
  "transitionSpeed": "gentle"
}

PUT /transition​

Update your transition settings:

await fetch("https://cloud.vestaboard.com/transition", {
  body: JSON.stringify({
    transition: "curtain",
    transitionSpeed: "fast",
  }),
  headers: {
    "Content-Type": "application/json",
    "X-Vestaboard-Token": "YOUR_API_KEY",
  },
  method: "PUT",
}).then((res) => res.json());

Transition Styles​

Choose from four distinct transition effects:

• Classic - Original all-at-once clear, then builds new characters
• Wave - Smooth left-to-right, one column at a time
• Drift - Smooth right-to-left, one column at a time
• Curtain - Smooth outside-in as columns meet at the center

Each transition style can be set to either "gentle" for a slower, quieter, more deliberate effect, or "fast" for quicker message changes.

The transition settings persist across all new messages until you change them again with the API or in the app.

Use Cases​

The transition API opens up a lot of new creative possibilities for developers.

Dynamic Transitions Based on Content​

// Use gentle transitions for inspirational quotes
await setTransition({ transition: "wave", transitionSpeed: "gentle" });
await sendMessage({
  text: "I begin to speak only when I’m certain what I’ll say isn’t better left unsaid. - Cato",
});

// Use fast transitions for time-sensitive alerts
await setTransition({ transition: "classic", transitionSpeed: "fast" });
await sendMessage({ text: "Your house is on fire!" });

Time-of-Day Transitions​

const hour = new Date().getHours();

if (hour < 9 || hour > 20) {
  // Quieter transitions for early morning or late evening
  await setTransition({ transition: "drift", transitionSpeed: "gentle" });
} else {
  // More energetic transitions during the day
  await setTransition({ transition: "curtain", transitionSpeed: "fast" });
}

Randomized Visual Interest​

const transitions = ["classic", "wave", "drift", "curtain"];
const speeds = ["gentle", "fast"];

// Randomly vary transitions throughout the day
const randomTransition =
  transitions[Math.floor(Math.random() * transitions.length)];
const randomSpeed = speeds[Math.floor(Math.random() * speeds.length)];

await setTransition({
  transition: randomTransition,
  transitionSpeed: randomSpeed,
});

Get Started​

The transition endpoints are available now for all Cloud API users that have access to transitions in the app. Check out the full documentation in our Cloud API endpoints guide.

The transition API gives you fine-grained control over one of the most iconic aspects of the Vestaboard experience.

We can't wait to see what creative uses you come up with for this new feature!