Overview
Cruel is a concept build based on an Envato Elements template — a creative agency design with sharp typography, bold layout choices, and high visual contrast. The original Figma file caught my eye for its editorial aesthetic and structural complexity, making it an ideal candidate to push my Webflow development further.
This is not a client project. The design is licensed from Envato Elements, and I built it in Webflow as a development exercise to refine my Figma-to-web workflow and experiment with more ambitious interaction design.
Figma to Webflow
The template’s design language is confident and detail-heavy, which made the translation to Webflow an interesting technical challenge. Key elements I focused on:
- Typographic hierarchy — Oversized display headings with precise letter-spacing and line-height values, balanced against smaller supporting text
- Grid-breaking layouts — Sections where elements intentionally overlap or extend beyond the expected column boundaries, requiring careful absolute/relative positioning in Webflow
- Spacing rhythm — Maintaining the Figma file’s vertical rhythm across breakpoints without hardcoding pixel values
The responsive work required significant adaptation. Layouts that rely on generous whitespace and oversized type at desktop need thoughtful restructuring at tablet and mobile — not just scaling down, but rethinking composition at each breakpoint.
Interactions & animation
The design’s bold aesthetic called for motion that matches its energy:
- Scroll-triggered reveals — Staggered fade and slide-up animations on section entry, timed to guide the eye through each layout
- Text animations — Character and word-level reveals on key headings using Webflow interactions
- Hover states — Subtle scale and colour shifts on interactive elements, keeping feedback consistent across the site
- Parallax depth — Layered scroll speeds on select hero and media sections for added visual depth
Technical details
A few specifics from the build:
Class architecture — Used a component-based naming approach to keep styles modular and predictable. Utility classes handle spacing and typography scale, while component classes own layout and visual identity.
Image handling — Exported assets at 2x for retina, converted to WebP, and used Webflow’s responsive image settings to serve appropriate sizes per viewport.
Performance — Despite the animation-heavy design, kept interaction complexity manageable by limiting concurrent animations and using Webflow’s native interaction engine rather than external scripts.
Why concept builds matter
Working from polished Figma templates like this lets me focus purely on the development craft — translating design intent into a real, responsive, interactive site without the variables of an active client brief. It’s how I stress-test techniques before applying them to client work.
The Cruel build sits alongside projects like Krate as part of my ongoing practice: taking strong visual design and making it work on the web.