Phox Div works like the regular Breakdance div, but it responds to the mouse. Choose a glow that follows the cursor, a 3D tilt, or one of seven trail effects. Put anything inside it and the effect wraps your content.
Every card below is built with Phox Div: a glowing border on membership cards, glowing tiles, a strong and a subtle tilt, a fireworks banner and all seven trail types. On touch screens the effects react to taps.
Three Phox Divs with 1px of padding and a dark card inside. Effect: Glow, colour #A78BFA, radius 28. Only the thin edge lights up, and the light moves from card to card.
Weekdays before 4pm and all day at weekends.
Train whenever the doors are open, 6am to 10pm.
For members who want a plan built around them.
Four Phox Divs with a pale background and no inner card, so the whole tile lights up. Colour #C4B5FD, radius 22.
1 Gbps fibre on every desk, with a wired port if you prefer.
Book rooms for 4 or 10 people by the hour from the app.
Members get a key fob that works day and night.
Beans from a local roaster, free all day.
Effect: Tilt with Max Tilt 25, Scale 1.1 and Perspective 600. The glare follows the cursor across the card.
Image cards with Max Tilt 10, Scale 1.03 and Perspective 1000. A light touch that suits photos and product cards.
Effect: Trail, Trail Type Fireworks, Rainbow Yes, size 6, intensity 10. The text sits above the effect. Move your mouse across the banner.
Gates open at 5pm. Bonfire at 6.30pm, fireworks at 7.30pm. Food stalls, hot drinks and a funfair for the children.
Each tile is a Phox Div set to Trail with a different Trail Type, colour, size and intensity. Move your mouse through them. Press C to clear the dots.
Use it anywhere you would use a div.
Drop it onto your page and lay it out like a normal div, with the same layout, background, padding and border settings.
Put cards, images, icon boxes, price lists or anything else inside it.
Choose Glow, Tilt or Trail in Effect Settings and adjust its colour, size and strength.
Each effect has its own settings.
A soft light follows the cursor across the div. Set its colour and radius.
Show the glow behind your content, or on top of it.
Place several glow divs side by side with the same radius and the light flows across them as one.
The div tilts towards the cursor with a glare highlight. Set the perspective, speed, scale and maximum tilt.
On phones and tablets, tilt can follow the angle of the device.
Fireworks, Sparkle, Trail, Lightning, Galaxy, Paint and Neon follow the cursor inside the div.
Use a single colour or switch on Rainbow to cycle through colours.
Control how big and how busy each trail effect is.
Includes Breakdance layout, background with hover colour, width, min height, padding, borders and margin.
Pick one effect per div in Effect Settings.
Anywhere you want a section to feel alive.
Add a glow to service or feature boxes on a dark section.
Give a row of cards a glowing edge that follows the cursor.
Tilt project images with a glare highlight.
Tilt a gift voucher or offer card so it stands out.
Add fireworks or sparkle to a banner for a launch, a party or a sale.
Use lightning, neon or fireworks for a playful touch.
This is the full list of settings in the Breakdance editor, with their default values.
| Control | What it does | Default |
|---|---|---|
| Layout & Background | ||
| Layout | The standard Breakdance layout options for a div. | — |
| Background | Background colour with a hover colour. | — |
| Container | ||
| Width & Min Height | Size of the div. | — |
| Padding & Borders | Inner spacing, border, radius and shadow. | — |
| Effect Settings | ||
| Effect | Glow, Tilt or Trail. | Glow |
| Color | Glow colour. | #6B0AC7 |
| Radius | Glow size, 0 to 100. | 35 |
| Glow Above Div Contents | Draw the glow on top of the content. | Off |
| Perspective | Tilt depth, 200 to 1000. | 500 |
| Speed | Tilt speed, 100 to 1000. | 300 |
| Scale | Zoom on hover, 1 to 2. | 1 |
| Max Tilt | Largest tilt angle, 10 to 40. | 25 |
| Hover Borders & Shadow | Border and shadow while tilting. | — |
| Trail Type | Sparkle, Trail, Fireworks, Galaxy, Lightning, Paint or Neon. | — |
| Rainbow | Cycle through colours instead of one colour. | — |
| Effect Above Div Contents | Draw the trail on top of the content. | — |
| Effect Color | Trail colour. | — |
| Effect Size | Size of the trail particles. Needs a value for trails to work. | — |
| Effect Intensity | How many particles each movement makes. Needs a value for trails to work. | — |
| Spacing | ||
| Margin | Space above and below the div. | — |
Yes. Phox Div is a container, so anything you can put in a Breakdance div works here.
Elements inside the div need a transparent background so the glow can show through. Or turn on Glow Above Div Contents.
Tilt only runs on the front end. Save the page and view it to see the effect.
Give the Phox Div 1px of padding and a light background, then put a card with its own dark background inside. The glow only shows in the 1px gap, as in the gym demo. Use the same radius on each card and the light flows across the row.
Set Effect Size and Effect Intensity. They have no default value, and the trail needs both. Content inside the div should have a transparent background so the dots behind it can show.
The effects are designed for a mouse. They react to touch, and tilt can follow the device's gyroscope.
Phox Div is included with Phox Elements, along with 140+ other premium elements for Breakdance.