The Oztix swirl pattern, cropped to fill a banner, panel, or strip in a fixed brand colour.
import { Pattern } from '@oztix/roadie-components/pattern'
The pattern fills its parent in both axes and never sizes itself, so give the parent a size. It has no radius of its own: it usually sits on an edge, so the container rounds and clips it, here with rounded-3xl overflow-hidden. The default is the right crop in brand blue.
crop says where the pattern sits. The swirls always run off every edge of the box, so you never see where the artwork ends. A small box draws them at a set line weight and shows more of them as it grows. Once a box outgrows the artwork at that weight, about 300px wide for a strip, the swirls grow with it, like background-size: cover. Each crop turns the artwork so its top edge lies along the edge the pattern sits on, and anchors it there, like background-position.
banner is for a wide hero, with the artwork centred. Set content on a raised surface over it, never straight on the swirls.
left and right are for a panel on that side of the content, with the artwork turned on its side.
top and bottom are for a strip along that edge of a card or page, each its own Pattern with the content between them in normal flow. The card clips its own corners with overflow-hidden, so the strips take their radius from the card.
tone picks the brand colour: brand-blue (the default) for every market, brand-purple for music and venues, and brand-orange for shows, events, and sports. Each draws step 5 swirls on a step 9 ground of its hue, from --color-brand-blue-light-5 and --color-brand-blue-light-9 and their purple and orange twins. Like all brand artwork, the colour stays the same in light and dark mode and ignores a surrounding intent.
The pattern frames a branded header or footer with the logo on a strip across it. Let the pattern bleed off the edges.
<div className='relative grid place-items-center'><Pattern crop='banner' className='absolute inset-0' /><div className='relative rounded-2xl emphasis-raised p-6'>…</div></div>
Do
Set headings and body text on a raised surface over the pattern, or beside it.
<div className='relative'><Pattern className='absolute inset-0' /><p className='relative'>Doors 7pm. Bring your ticket on your phone.</p></div>
Don’t
Don't set text straight on the pattern. The swirls cross every line, and no text colour reads on both the ground and the lines.
<Pattern tone='brand-orange' />
Do
Pick blue, purple, or orange with tone.
<Pattern className='opacity-50 hue-rotate-90' />
Don’t
Don't recolour, fade, or filter the pattern. Only the three tones are approved artwork.
<div className='h-48'><Pattern crop='right' /></div>
Do
Give the parent a size and pick the crop for where the pattern sits. The crop fills it without stretching.
<Pattern className='h-48 w-96 rotate-90 -scale-x-100' />
Don’t
Don't size, rotate, or flip the pattern itself. Choose another crop instead.
Where the pattern sits, and so which edge of the artwork it lines up with: `top` and `bottom` for a strip along that edge, `left` and `right` for a panel on that side, and `banner` for a wide hero, centred.
Defaults to right.
The brand colour, fixed in light and dark mode.
Defaults to brand-blue.