# Warm & Fuzzy creative portfolio

> A creative-company portfolio with a full-screen showreel image, an orange introduction, and an asymmetric black-backed gallery of campaign imagery. Large work titles and compact project names and years organize the page.

- Kind: Website
- Live website: https://www.warmnfuzzy.tv/
- Page: https://meetreference.com/v/ref-warm-fuzzy-682e/
- Ready-to-use agent handoff: https://meetreference.com/v/ref-warm-fuzzy-682e/agent.txt
- Authorship: Not stated
- Made with: Not stated
- Model: not stated
- Built with: not stated
- Style: Portfolios; asymmetric grid, oversized typography, media-led, high contrast, saturated accents, grain texture, editorial portfolio
- Preview: a flip-through of inspected screenshots; open the live work to experience its motion and interactions.
- Shared by Neutral Studio / Paulo Ferreira Jorge / warmnfuzzy.tv in Website: https://www.awwwards.com/sites/warm-fuzzy
- Prompt fidelity: Unavailable in this entry. The recreation brief is written by Reference.

## Before you start

Guidance from Reference, separate from the creator's instructions.

1. Read the reference and inspect the project, installed libraries, and available agent skills before writing code. Reuse suitable tools already present.
2. Prefer the creator-reported libraries and skills when they fit the task. Explain what useful additions help with, and install missing project dependencies or relevant skills from official sources when the environment and the user's existing permissions allow it. Respect the project's package manager and setup rules; do not ask again for routine setup already authorized.
3. Distinguish tools used by the creator from your own recommendations. A listed tool is not automatically required, and an empty tools or requirements list means the setup is unknown, not that nothing is needed.
4. Ask concise questions when missing inputs or choices materially affect the result: paid services, credentials, the user's assets, or a different production approach. Use existing answers and permissions; continue independent work while waiting.
5. If a useful library, skill, or service cannot be installed or used, explain an available alternative and its expected effect on quality, features, or effort. Get the user's choice before a material compromise; otherwise state the fallback and continue. Never silently simplify the result or claim to have used a tool you did not use.

## Recreating this website

This is a visual reference. No original creator prompt is available. The following brief was written by Reference after inspecting the work.

Build the gallery around three unequal tile sizes and rotate their positions across rows, keeping gutters and caption alignment consistent. Contrast full-bleed imagery with a saturated introduction panel, then use a dark textured field to unify visually diverse projects. Adapt the project imagery, labels, and accent colors to the new subject, and add stronger contrast behind text over busy hero imagery.

1. Open the live work or source and inspect the frame images below.
2. Adapt its layout, hierarchy, palette, and interaction patterns to the user's own content and brand.
3. Compare the result against the reference. Use your own assets and credit the original creator.

## What it looks like

Written by Reference from the captured walkthrough frames, not by the creator.

Bold, playful creative-agency portfolio combining a short brand statement with a grid of colorful project previews.

- Color: Mostly charcoal and black, with vivid orange-red, electric blue, green, cyan, magenta, and varied colors in the project images.
- Type: Clean white sans-serif typography. The brand statement is medium-sized; “WORK” appears in oversized bold lettering, with small labels and project details.
- Framing: A featured sports-court image fills the top area in one frame, followed by a wide orange-red statement panel. Other frames show a dark portfolio page with project thumbnails arranged in a multi-column grid and generous black spacing.
- Structure: A sequence of page views featuring a hero, brand introduction, and project gallery. Gallery cards combine images with small project names and dates; a vivid blue strip appears along the bottom.

Storyboard, nine frames spread across the captured walkthrough: https://meetreference.com/media/ref-warm-fuzzy-682e/storyboard.webp

- Frame 1 at 1.0s: https://meetreference.com/media/ref-warm-fuzzy-682e/f1.webp
- Frame 2 at 2.9s: https://meetreference.com/media/ref-warm-fuzzy-682e/f2.webp
- Frame 3 at 4.9s: https://meetreference.com/media/ref-warm-fuzzy-682e/f3.webp
- Frame 4 at 6.8s: https://meetreference.com/media/ref-warm-fuzzy-682e/f4.webp
- Frame 5 at 8.7s: https://meetreference.com/media/ref-warm-fuzzy-682e/f5.webp
- Frame 6 at 10.7s: https://meetreference.com/media/ref-warm-fuzzy-682e/f6.webp
- Frame 7 at 12.6s: https://meetreference.com/media/ref-warm-fuzzy-682e/f7.webp
- Frame 8 at 14.6s: https://meetreference.com/media/ref-warm-fuzzy-682e/f8.webp
- Frame 9 at 16.5s: https://meetreference.com/media/ref-warm-fuzzy-682e/f9.webp

## Links

- Visit site: https://www.warmnfuzzy.tv/
- Original post: https://www.awwwards.com/sites/warm-fuzzy
- Source and design credit: https://www.awwwards.com/sites/warm-fuzzy