Motion
The Area Foundation moves the way the mosaic is made, by hand and in pieces. We unite the San Antonio area, and the brand moves the same way: pieces come together from around the frame and close the gaps until they make one picture. Color brings the energy. The holds keep it steady.
Principles
Come together
Pieces start apart and draw in toward each other until the gaps close. Many parts, one picture.
Always inward
Motion closes distance. Pieces travel toward the center of the frame, never away from it, and never across the whole screen.
Passionate, then steady
Changes are quick and full of color. Then the composition holds still long enough to read.
The wordmark locks
The lockup’s two lines meet from opposite sides and lock. Headlines slide in line by line. People hold still.
Colors never blend
Pieces keep their color as they move. Nothing fades or tweens between colors, and every frame uses only the 34 palette colors. The one exception is the A in Name to Mark and Mark to Name, which shifts from Fiesta Pink to its lockup color as it shrinks into place.
Every frame is on brand
Pause anywhere and the frame should work as a still: corners in their corners, the wordmark whole, Fiesta Pink under a quarter of the frame.
The moves
Eight counties
The origin story in motion. Eight counties start apart and draw together into one region, each in its own color. Then their names appear and the map holds. Use it to open a film, a campaign, or an annual report video.
- Each county: fades in near the edge, then a 0.9s gather toward the center, 0.09s apart
- End: everything fades out in 0.3s to a blank canvas before the next gather
- Hold the full map 1.5s
- County names appear whole, once the map is complete
Come together
The signature move for pattern, on a loop. Each new pattern starts as one flat color that fills the canvas. Then all the other hand-cut pieces glide in together from beyond the edges and lock into the mosaic. It holds, the pieces fade away, the next flat color fades in, and a new pattern in new colors comes together.
- Ground: a new color each loop, full frame; never Fiesta Pink
- Between patterns: old pieces fade out (0.45s), then the next ground color fades in (0.55s); the ground changes color every time
- Pieces: all at once, fading in near the edges, 1.1s glide with a long ease-out
- Pieces travel toward the center, never across the whole frame
- Hold 1.8s, then fade to the next ground color
Corner sweep
Corners grow out of their own corner and frame the page. The small top wedge comes first. At the bottom, the lighter band lands a beat before the darker wedge it wraps. Then the headline slides in from the right, one line at a time, and the wordmark comes together last.
- Wedges: 0.5s from the corner, 0.15s apart
- Headline lines: 0.75s, fade in as they slide a short way from the right, 0.2s apart
- Hold 2.4s, then cut to the next approved corner pair
Gather around
The person is there on the cut, anchored to the bottom edge as the cutout rules ask. Then the pattern comes together around them: the ground is already there, and the other pieces glide in together from the edges. The community comes to the person, not the other way around.
- Person: holds still from the first frame
- Pattern: flood the ground, then all pieces glide in together, 1.5s
- The person never moves, scales, or floats
Name to mark
On Twilight only. The A draws itself by hand in Fiesta Pink, large in the middle of the frame: up the right leg, down the left leg, then across the arc. It holds, then shrinks into its place as the A of Area in the stacked Area Foundation lockup, turning Limestone as it gets smaller. Then the rest of Area fades in as it slides out from the A, and Foundation comes in from the opposite side. Use it to open or close a piece.
- Ground: Twilight, the whole time
- Monogram: drawn in Fiesta Pink in one continuous stroke, right leg up, left leg down, then the arc, about 1.1s, then hold 1s
- Shrink: 0.9s ease in-out into its exact place in the lockup, shifting from Fiesta Pink to Limestone on the way
- Lock: the rest of Area starts most of the way out of the A and fades in as it slides the last stretch, while Foundation slides in from the right; 0.65s, the slide with a quick ease-out and the fade running gently across the whole move
- The A never moves after it lands; the lockup holds 2s
Mark to name
Teaches people that the A stands for the Area Foundation. The A draws itself by hand in Fiesta Pink, large and alone in the frame: up the right leg, down the left leg, then across the arc. It holds, then shrinks into its exact place as the A of Area, turning Twilight as it gets smaller. Then the rest of Area Foundation fades in as it slides out from the A, and San Antonio comes in from the opposite side. Use it to introduce the monogram, or to open a piece.
- Monogram: drawn in Fiesta Pink in one continuous stroke, right leg up, left leg down, then the arc, about 1.1s, then hold 1s
- Shrink: 0.9s ease in-out into its exact place in the wordmark, shifting from Fiesta Pink to Twilight on the way; nothing else is on screen
- Lock: the rest of Area Foundation starts most of the way out of the A and fades in as it slides the last stretch, while San Antonio slides in from the right; 0.65s, the slide with a quick ease-out and the fade running gently across the whole move
- The A never moves after it lands; the full wordmark holds 2s
Pattern frame
The frame comes together first, the same way every pattern does: the ground floods the canvas and the pieces glide in from beyond the edges. Then a window opens in the middle and the photo appears inside it, settling as the window reaches the border.
- Pattern: flood the ground, then 1.1s gather
- Window: opens from the center to the border inset, 0.9s ease in-out
- Photo: settles from 106% to 100% as the window opens
- Between frames: the photo and pieces fade out, then the next ground fades in
Every treatment in motion
Each photo treatment moves by the same rules. Pattern comes together from the edges. Corners grow from their corner. Frames open like a window. People hold still and fade in.
Ask for a motion by name
Every motion has a name. Use it in a brief or a request: “Give this card Section Gather,” or “Open the deck with Counties Gather and close with Name to Mark.”
| Name | For | Sequence |
|---|---|---|
| Counties Gather | Openers, films, reports | The eight counties fade in near the edges and draw together; names appear; the map holds, then fades out. |
| Pattern Gather | Pattern backgrounds, screen loops | A flat ground color; every other piece fades in near the edges and glides in together; hold; pieces fade out; the next ground fades in. |
| Corner Sweep | Letterheads, slides, title cards | Corners grow from their corners, headline lines slide in from the right, the wordmark locks last. |
| Name to Mark | Opens and closes | On Twilight: A Draw in Fiesta Pink, then the A shrinks into the stacked Area Foundation lockup, turning Limestone; the rest of Area fades in as it slides out from the A and Foundation comes in from the right. |
| Mark to Name | Introducing the monogram, opens | A Draw in Fiesta Pink, hold, then the A shrinks into its place as the A of Area, turning Twilight; the rest of Area Foundation fades in as it slides out from the A and San Antonio comes in from the right. |
| Photo Settle | Full-bleed image | The photo fades in and settles from 105%. |
| Section Gather | Image bleed with pattern section | Photo Settle, then a Pattern Gather inside the section. |
| Pattern Frame | Image with pattern border | Pattern Gather fills the frame, then a window opens from the center and the photo settles inside. |
| Cutout Section | Image cutout with pattern section | Pattern Gather inside the section, then the people fade in and settle. |
| Cutout Corner | Image cutout with corner element | The corner grows from its corner, then the people fade in and settle. |
| Solid Frame | Image with solid border | The color field fades in, then the window opens with the photo. |
| Window Corners | Image with corner elements | The window opens with the photo, then the corners grow from their corners. |
| Cutout Gather | Cutout on pattern | The person holds still while a Pattern Gather happens around them. |
The parts these are built from also have names: Gather, Settle, Window, Grow, Line Slide, Wordmark Lock, and A Draw.
Timing and easing
| Move | Value | Use |
|---|---|---|
| Gather | 1.1s, together | Patterns cut to a flat ground color, then every other piece glides in at once from beyond the edges. The counties gather the same way, 0.09s apart. |
| Stagger | 0.07–0.15s | The gap between pieces, wedges, or lines. |
| Lock | 0.8s, ease in-out | The wordmark’s top line from the left, the bottom line from the right, together. |
| Settle | 0.45–0.5s | Type and the monogram appear in place and settle from 104% to 100%. |
| Hold | 1.2–2.4s | A finished composition holds still. Add about a second per line of body copy, and hold any message at least 3s. |
| Easing | cubic-bezier(.25, 1, .5, 1) | One curve for everything: a quick start and a long, soft landing. No bounce, no overshoot. |
| Interface | 0.2s, 0.4s | On the web: 0.2s for hovers, 0.4s for cards and panels. |
Wordmark and type
- The wordmark comes together. Its top line slides in from the left and its bottom line from the right, at the same speed, until they lock into the approved lockup. It arrives last. Never animate single letters, change the spacing, or hold the lines apart.
- Same place on every screen. In a multi-screen piece the wordmark keeps its size, corner, and margins.
- Type moves in whole lines. The headline slides in from the right, one line at a time, then the body follows as one block. No typing or letter-by-letter effects.
- Type holds while it’s read. Nothing moves behind or under a line someone is reading.
Don’ts
- Don’t crossfade or tween between colors. The A in Name to Mark and Mark to Name is the only exception.
- Don’t move pieces apart, or slide anything across the whole frame.
- Don’t bounce, overshoot, spin, or wobble anything.
- Don’t rotate, stretch, or animate the letters of the wordmark.
- Don’t morph one pattern piece into another. Cut to the next pattern.
- Don’t let pieces drift during a hold.
- Don’t add blurs, glows, drop shadows, particles, or 3D.
- Don’t let Fiesta Pink fill more than a quarter of any frame.
Accessibility
- Respect the reduced-motion setting. When it’s on, show each piece in its finished state.
- Anything that moves for more than 5 seconds needs a way to pause it.
- Nothing flashes more than three times a second. Video never autoplays with sound.
- Never put information only in motion. The resting frame has to say everything.