Morphing Bloom

MORPHING BLOOM

Add an organic, continuously morphing flower to your Showit website. The bloom cycles through layered floral shapes and colors to create soft, evolving movement.

Use it as an oversized decorative element, beside typography, or as a focal point on a simple canvas.

HOW TO USE IT

1. ADD A CIRCLE ICON

Add a circle icon to your Showit page.

The circle acts as a placeholder for the Morphing Bloom. The circle itself will be hidden when the code runs.

Resize and position the circle wherever you want the Morphing Bloom to appear.

You can make it larger or smaller to suit your design.

Keep the element square for the best results.

2. ADD THE CLASS SELECTOR

Select the circle and go to:

Advanced → Class Selectors

Add:

morphing-bloom

Then click the check mark to save it.

Showit may display it as .morphing-bloom after you add it.

3. ADD THE JAVASCRIPT

Select the page name in the Pages panel.

Go to:

Advanced Settings → Page Loaded Javascript

Paste the entire Morphing Bloom code into the box.

Do not add <script> tags. Showit adds them automatically.

CUSTOMIZE THE EFFECT

At the top of the code, you'll find the colors you can customize.

FLOWER COLORS

Find:

var flowerColors = [
  '#E95D45',
  '#F2A07B',
  '#D9896A',
  '#B85C62',
  '#E8A85F',
  '#C96F52'
];

Replace the HEX codes with your own colors.

You can also add or remove colors from the list.

For a beautiful layered effect, choose colors that feel related while still having enough contrast to distinguish the different blooms.

CENTER COLOR

Find:

var centerColor =
  '#F4E5D2';

Replace the HEX code with the color you would like for the center of the flower.

MOBILE NOTE

Morphing Bloom works on both desktop and mobile.

Use the circle icon to independently size and position the bloom in your desktop and mobile layouts.

No additional mobile code is required.

DESIGN TIP

The size of the circle icon controls the size of the Morphing Bloom.

Keep the circle square, then resize and reposition it directly in Showit to fit your design.

QUICK INFO

Difficulty: Easy
Requires: Circle Icon + Class Selector + Page Loaded Javascript
Class Selector: morphing-bloom
Effect: Continuously morphing floral animation
Element: Circle icon
Flower Colors: Customizable
Center Color: Customizable
Size + Position: Controlled in Showit
Mobile: Yes
Coding Knowledge: Not required