Case study

Modify Agency

A corporate website for a digital marketing agency with multiple custom frame-by-frame SVG animations, a bilingual interface, and a mobile-first responsive design on a bold neon-green and purple color palette.

Built with
Next.js
React
Vercel
Mailchimp
31 frames
SVG animation of a flying goose
2 languages
Bulgarian and English interface
5+ animations
Custom hover and scroll animations
Mobile-first
Responsive design for every device

Modify Agency is a digital marketing agency from Burgas, Bulgaria, offering complete digital solutions - from social media and paid ads to video production, design, and web development. The agency stands out with a distinctive visual identity built on the goose symbol and the "flock in flight" metaphor as an expression of teamwork.

The design of the site was created by the in-house team at Modify Agency. We handled the technical implementation, the animations, and the full web build.

The images below are static screenshots. To see the real animations, hover effects, and interactive elements, check out the live site.

What's in the site

31-frame SVG animation of a flying goose
Expandable service cards with Framer Motion
4 interactive hover animations for the core principles
Bilingual interface (BG/EN)
5-step visual workflow
Portfolio section with filtering
Instagram integration - latest posts pulled directly into the site
Video/image upload in 16:9 or 9:16 format with correct rendering on mobile and desktop

Site screenshots

Hero section

Neon-green slogan "fly high, dive deep!" paired with a 31-frame SVG animation of a flying goose and purple gradients.

Color palette

Neon Green (#A5FF00) for accents, purple gradients (#6700FF - #C900FF), and a black background for a modern, bold look.

Aa

Typography

Sofia Sans for headings (extrabold, 80-200px in the hero), Montserrat for numbering and accents.

🪿

Visual language

The flock as a metaphor for teamwork, paired with decorative stars and gradient elements.

Modify designed the site in Figma; we turned it into code - exactly as designed, down to the last pixel. This is the kind of work we do for other agencies: they bring the design, we build the front end.

Pixel-perfect to the design

Every text block, spacing, and element sits exactly where the Figma placed it. No approximations - the live site matches the design one to one.

Separate mobile and desktop

The mobile and desktop designs differ in many places, so we built the components separately for each - not a single layout stretched to fit. Each version looks great on its own screen.

A dev partner for agencies

If you're an agency with a design ready and no in-house developers, we are the hand that builds it - clean, fast code from your Figma, under your brand.

Modify Agency had a clear brand vision that needed to be carried into the web:

Complex custom animations

The client wanted multiple frame-by-frame SVG animations - from a 31-frame goose flight animation to interactive hover animations for every section. This required precise optimization for smooth performance.

Bilingual interface

The site had to work fully in Bulgarian and English, with switching without reload and correct SEO for both languages.

Different layouts for mobile and desktop

The design called for fundamentally different visualizations for mobile and desktop, not just responsive, but entirely different components and interactions.

We chose a tech stack that allows maximum flexibility for animations and performance:

1

Frame-by-frame SVG animations

We built a system for frame-by-frame animations with SVG files. The hero goose animation includes 31 separate frames with a smooth 100ms transition between them. On desktop the animation triggers on hover, and on mobile it runs continuously.

2

Framer Motion for interactivity

We used Framer Motion for accordion animations on services (1200ms smooth transition), hover effects on the principles, and expand animations on the cards. Every animation is optimized for different behavior on mobile (tap) and desktop (hover).

3

Optimized performance

Despite the many animations, the site loads fast thanks to dynamic imports for below-the-fold components, preloading of critical resources, lazy loading of images, and custom font loading with font-display: swap.

4

Bilingual architecture

We implemented a full bilingual interface with Next.js App Router - switching between Bulgarian and English without reloading, with correct hreflang tags and separate meta descriptions for each language.

Next.js 14+
App Router, Server Components
TypeScript
Typed code for reliability
Tailwind CSS
Custom configuration
Framer Motion
Smooth animations

Despite the many custom SVG animations and interactive elements, the site scores excellently on Google PageSpeed Insights.

92
Performance (Speed)
Fast loading despite the heavy animations
100
SEO
Perfect search engine optimization
96
Best Practices
Follows the best practices

Google PageSpeed Insights is a free Google tool that measures the speed and quality of websites. A score above 90 is considered excellent.

Modify Agency got a website that perfectly reflects their brand character - bold, creative, and memorable. The neon-green and purple palette on a dark background, combined with the many custom animations, creates an unforgettable user experience.

Got questions? We've got answers.

Answers to the questions clients ask us most often

The site has a separate design for mobile and desktop, custom SVG and CSS animations, and a neon-green palette on a dark background that reflects the agency's brand character.

Yes. It has a full bilingual interface (Bulgarian and English) with switching without reload, correct hreflang tags, and separate meta descriptions for each language.

No. Despite the many animations, the site loads fast thanks to dynamic imports, lazy loading of images, and preloading of critical resources.

Yes. Get in touch for a free consultation.

We worked with Coding Turtles on building our website. Extremely professional attitude and patience. They were very fast and very precise. Recommend!
Elica Peeva
Modify Agency
Ready?

Let's build your next project.

Have a site or just considering one? Tell us briefly and we’ll send concrete guidance by email, no mandatory meeting.

Free consultation

We reply within 48 hours on business days. Your data stays with us.

Marketing Agency Website | Modify Agency Case Study | Coding Turtles