Unlucky Umbrella Studio

The studio’s creative toolkit

A little play.
A lot of possibility.

Try a shape. Frame your work. Reveal the difference. Find a combination you love, then bring it into your page.

How to use your choices ↓Ask AI to apply your choices

01 / Shape dividers

Make an entrance.

Turn the space between two sections into part of the design.

Style your divider
72 px

Try mirroring the slant. Symmetrical shapes look the same when flipped.

Live previewTwo sections, one flowing edge
Creative services

Good design.
Great possibilities.

What comes next

Give your next idea
a little room to shine.

The divider’s fill matches the section below it. The area behind it matches the section above.

Apply this divider Astro example

Copy this into a page in src/pages/. Replace the sample content and give section-content your page’s usual spacing.

Updates as you try different settings

02 / Animation presets

A little movement.

A soft entrance helps the work shine. Keep it subtle and give the eye time to follow.

Find your rhythm
90 ms

At 0 ms, the cards enter together. A small gap creates a gentle sequence. Each entrance lasts 650 ms.

Live previewPress replay to see the sequence
01

Idea

Start with a spark.

02

Design

Make it your own.

03

Launch

Put it into the world.

On your page, these elements reveal as they scroll into view.

Respects your system’s reduced-motion setting. Your switch choice also applies to the homepage.
Apply this animation Astro example

Wrap a card, image, or section in Reveal. The component handles scroll detection and reduced motion. Your content stays visible without JavaScript.

Each card gets its own delay

03 / Image shapes & frames

Give it a little shape.

A new silhouette, a bold edge, a little color. Same work, different personality.

Frame your work
4 px
12 px

Combine any shape with zoom, twist, or both. Hover over the picture, or use the preview button. The frame stays fixed, and effects respect your motion preferences.

Live previewA fresh frame for your work
Colorful Digital Print Solutions banner artwork

Try a border with no shadow, or a bold offset with no border. Images crop to fill the shape.

Apply this image frame Astro example

Copy into a page in src/pages/. Keep the import with your other imports, then replace the image and text with your own.

Updates as you try different settings

04 / Project-card hover effects

An invitation to explore.

Give a project a small, thoughtful response when someone stops to look.

Choose a response

Hover over the project or focus its link with Tab. On a phone, use the preview button. Tapping the project opens its case study.

Live previewA little nudge to look closer
Fids Riverside Sawmill branding over a sawmill photograph

Branding & website design

Fids Riverside Sawmill

Effects respect the motion switch above and your system preference. The project title and link always stay available.

Apply this project card Astro example

Copy into a page in src/pages/. Keep the import with your other imports, then replace the image and text with your own.

Updates as you try different settings

05 / Before & after

Reveal the difference.

Two images. One sliding edge. Let the transformation tell the story.

Set the first impression

Choose JPG, PNG, WebP, GIF, or AVIF images, up to 10 MB each. Files stay in this browser and clear on reset or refresh. Matching compositions work best; both images crop to the same frame.

Choose the starting position, then drag the divider in the preview to explore. Your copied example remembers the starting position.

Interactive previewDrag to compare
Original full-color Digital Print Solutions artworkOriginal color
Digital Print Solutions artwork shown in monochromeMonochrome

Drag the divider, or focus it and use the arrow keys. 50% Monochrome

Demonstration only: the same artwork shown in monochrome and its original color, not a client redesign. Use an approved before-and-after image pair for a real project.

To use your chosen images on a page, save them in public/assets/ with the names shown below, then copy the example. Image selection previews files here; it does not add them to your website. Replace the sample image descriptions with your own.

Apply this comparison Astro example

Copy into a page in src/pages/. Keep the import with your other imports, then replace the image and text with your own.

Updates as you try different settings

06 / From playground to page

Make it yours.

1

Choose & copy

Find a combination above, then copy its example. These controls experiment here; they don’t change the homepage.

2

Place it on your page

Open src/pages/index.astro. Keep imports between the opening --- lines. Add the component where you want it, and use your own content.

3

Preview & publish

Run npm run dev and check desktop and phone layouts. Run npm run verify, then commit and push to publish through Cloudflare.

Keep one import per component, even when using it several times. For a new business page, use SiteLayout: it supplies shared navigation, the main content area, footer, and motion controls. Place only your page’s sections inside it, and use wrap and section-pad for shared width and spacing. See the repository README and editing guide for a complete example.