Product Slider BlockFree downloadMenu

Morph Grid, a whole shelf of morph cards on one canvas budget

A browser allows only a limited number of WebGL canvases on a page, and gpu slider stops at 12 live ones. A shop grid has more products than that. So the grid does not keep a slider per card: it creates one under the pointer and removes it again.

Move across the grid and watch the count

Sliders live on this grid right now: 0

Pair of red leather low-top sneakers with white laces and soles on a light grey background
Close-up of the red court low

Red court low

€129Soft leather upper, cushioned sole. Comes with a spare set of laces.
Navy pebbled leather sneaker with a white sole, suspended against a grey wall
Close-up of the navy pebble low

Navy pebble low

€149Soft leather upper, cushioned sole. Comes with a spare set of laces.
Silver metallic sneakers worn with blue jeans, legs raised against a grey backdrop
Close-up of the silver foil low

Silver foil low

€139Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of white chunky sneakers with taupe panels lying on red satin
Close-up of the white chunk runner

White chunk runner

€135Soft leather upper, cushioned sole. Comes with a spare set of laces.
Pair of pale grey suede trainers with lugged soles on a dark glass plinth
Close-up of the pebble trainer

Pebble trainer

€155Soft leather upper, cushioned sole. Comes with a spare set of laces.
Two white vases, one tall and slender, on a magenta and turquoise backdrop
Close-up of the long-neck vase duo

Long-neck vase duo

€88Thrown by hand, glazed and fired twice. No two come out quite the same.
Orange glazed ribbed bowl lit dramatically against a black background
Close-up of the ember bowl

Ember bowl

€34Thrown by hand, glazed and fired twice. No two come out quite the same.
Two textured dimple vases in blush and sage against a weathered backdrop
Close-up of the dimple vase pair

Dimple vase pair

€96Thrown by hand, glazed and fired twice. No two come out quite the same.
Two half-glazed sandy stoneware jugs on a white and wood tray
Close-up of the two-tone jug pair

Two-tone jug pair

€74Thrown by hand, glazed and fired twice. No two come out quite the same.
Two hand-patterned ceramic mugs on a white table beside a variegated plant
Close-up of the patterned mug pair

Patterned mug pair

€42Thrown by hand, glazed and fired twice. No two come out quite the same.
Green glazed ceramic cup and bowl on draped peach and white fabric
Close-up of the moss glaze set

Moss glaze set

€56Thrown by hand, glazed and fired twice. No two come out quite the same.
Overhead view of black coffee in an orange polka dot cup on a terracotta and white backdrop
Close-up of the orange dot cup and saucer

Orange dot cup and saucer

€24Roasted in small batches and sent out within the week.
Roasted coffee beans spilling from a gold paper bag onto a pale mint surface
Close-up of the gold bag single origin

Gold bag single origin

€16Roasted in small batches and sent out within the week.
Overhead view of an open white bag of roasted coffee beans on white
Close-up of the morning roast beans

Morning roast beans

€14Roasted in small batches and sent out within the week.
Overhead view of black coffee in a white cup on a square saucer, half on white wood and half on black
Close-up of the square saucer cup

Square saucer cup

€22Roasted in small batches and sent out within the week.
Espresso in a pale blue cup on a bamboo saucer at the edge of a marble table
Close-up of the bamboo saucer cup

Bamboo saucer cup

€19Roasted in small batches and sent out within the week.

What it does

At rest
Every card is an ordinary image and a price. No canvas, no shader and no context.
Pointer enters
A slider is created for that card and starts to morph. The one from the previous card is destroyed first.
Pointer leaves
The card goes back to its first image. When it has settled, its slider is destroyed.
Quick view
Opens a native dialog with the picture, the price and add to cart. Escape closes it and focus goes back to the card.
Keyboard
Tab reaches each card, and focus does what the pointer does.
Touch
No slider is created, as there is no hover. Quick view works by tap.

Use it for a category page or a section with many products where hover morphing is wanted on all of them. On WebGPU, gpu slider's docs measured all 20 of 20 sliders drawn, so the budget matters most in browsers on WebGL, where the cap is 12.

Pro

Pro. Pro starts at $19 a year.

Set it once, or per block

Everything on this site is a setting, not code. Each block's sidebar has a Pointer panel and a panel for where the name, price and button go. And three storewide switches in WooCommerce, Settings, Products put it on every list and product page, without touching a template.

Try the sidebar on a live card.

Block sidebar, Pointer (Pro)

Effect under the pointer
12 to choose from
Size
0 to 100
Strength
0 to 100

Block sidebar, Name, price and button

Show them
Always, or when pointed at

WooCommerce, Settings, Products

Lists of products
Hover morph on all of them
Product pages
Product Stage in place of the gallery
Transition
Free: fade, distance, ripple, zoom. Pro adds more
Pointer effect (Pro)
One for the whole shop
Turning a switch off puts your theme's own output back.

Questions

Why not one slider per card?

With WebGL, gpu slider draws at most 12 sliders on a page. A grid of 24 would have 12 cards drawn by the canvas and 12 falling back. Creating on demand keeps it at one.

What does destroying a slider do?

destroy() gives the page back as it was: the listeners go, the images are left as ordinary images, and the canvas is kept aside for reuse or released.

Does it slow down a page with many products?

A page with no hovering has no canvas at all, so its work is that of plain images.

Does it need pagination?

It is a grid of whichever products the block is set to show. Pagination or a "load more" follows your WooCommerce setup and the block settings at release.

See it elsewhere

Transitions that suit it

In a sample shop

Also on

Morph Grid comes with Pro. Pro starts at $19 a year.

Get the free plugin