Logo Sting
A 2-4 s logo animation. Short and long cuts for Reels openers, YouTube intros, deck covers and email signatures.
SERVICE · MOTION · REMOTE
Motion Design
Motion Design
& Logo Animation
A 3 second signature for your logo, a silent loop on your homepage hero, kinetic type for Reels. I design all of it in code and render it to video: your exact font and colors, and edits take minutes.
~230
KB AV1 SHOWREEL
30
FPS RENDER
3
FORMATS FROM ONE SOURCE
SHOWREEL · 11 S
This site's own intro
This clip was rendered from an HTML composition written for emrekazak.com: a viewfinder HUD, a Neue Haas Grotesk headline and a phosphor accent rule. If your browser supports AV1, the file it downloaded is about 230 KB.
Emre Kazak showreel: an 11 second brand intro where the name, a service line and an emrekazak.com tag appear inside a camera viewfinder frame.
WHAT MOTION DOES FOR A BRAND
Motion works like a brand's voice: build it right once, and it repeats everywhere
A static logo is a signature; an animated logo is an entrance. When the same 2-3 second move repeats in the first second of a Reel, the opening of a YouTube video and the cover slide of a deck, viewers start recognizing the brand before they read it. That repetition outlives any one-off ad film.
On the web, motion does quieter work. A short loop in the hero shows what the product does at a glance: how a dashboard opens, how many steps an order takes. Headlines and copy stay in the page as HTML; the video is only decoration and demo, so SEO and accessibility are untouched.
On social, kinetic typography is the fastest content format that needs no shoot. A customer review, a price announcement or a three point tip becomes a 9:16 Reel in your brand font with rhythmic cuts. The same template is re-rendered with new copy every week.
SCOPE · WHAT I PRODUCE
What is in a motion design package?
From the logo signature to the site loop, everything is derived from the same brand system.
Kinetic Typography Reels
Text-led 9:16 videos: announcements, reviews, tips, pricing. A template re-rendered weekly with new copy.
Website Hero Loop
A silent, seamless 6-12 s loop. AV1 + WebM + MP4 plus a poster image, total budget under 600 KB.
Product / UI Demo
A short loop that walks through a dashboard, app or checkout flow with a cursor and callout boxes.
Social 9:16 Set
The same composition re-laid out for Reels, TikTok and Story sizes, respecting each safe area.
Transparent Overlay
Lower thirds, name tags, maps or counters that sit on top of filmed footage; alpha WebM / MOV.
HOW I MAKE IT
Design in code, deliver as video
I write the animation in HTML and GSAP like a web page, not on an After Effects timeline. A browser engine renders the composition frame by frame to MP4. The result: your real brand font and exact color codes, and changing a headline or cutting the duration from 8 to 6 seconds takes minutes.
For web delivery I compress every clip in three codecs. Modern browsers pick the AV1 file, others take WebM or MP4, and there is a separate 720 px version for mobile. The video only plays while it is on screen, never starts for users with 'reduce motion' enabled, and shows a poster image instead.
| Format | Size | Use |
|---|---|---|
| GIF (640 px, 128 colors) | 25.3 MB | Email and README only. Never on the site. |
| Animated WebP | 1.1 MB | Only when an <img> is mandatory. |
| H.264 MP4 | 1.2 MB | Universal fallback, social uploads. |
| VP9 WebM | ~500 KB | Chrome, Firefox, Android. |
| AV1 MP4 | ~230 KB | Safari 17+ and modern browsers. First choice. |
LOOPS WE USE ON THIS SITE
Examples from inside this site
The loops below run live on emrekazak.com pages. All of them use the same embed component and only play while visible.
PROCESS
4 steps from brief to delivery
-
01 / BRIEF
Brand system + placement
Logo file (SVG), fonts, color codes and where the video will play. Website, Reels or a deck?
-
02 / STORYBOARD
Key frames
3-5 still frames that set the movement. Nothing is rendered before approval.
-
03 / ANIMATION
Code + preview
HTML + GSAP composition, a preview link and interim renders. Same-day revisions.
-
04 / DELIVERY
Master + web + social
1080p/4K master, AV1/WebM/MP4 + poster for the web, 9:16 social cuts and embed code.
DELIVERABLES
What you have at the end of the project
- 1080p or 4K master MP4 (H.264, high bitrate)
- Web set: AV1 + WebM + MP4, a 720 px mobile version and a WebP poster
- 9:16 and 1:1 social versions, laid out for safe areas
- Alpha WebM / ProRes 4444 overlay when needed
- Ready embed code for your site (lazy playback, reduced-motion support)
- Source composition: a template that can be re-rendered with new copy
PACKAGES
A clear quote based on scope
I work on a single logo sting, a website hero loop, a product demo loop or a monthly set of kinetic typography Reels. Once duration, number of scenes and delivery formats are clear, I send a fixed-price quote.
Get a Quote →
FAQ
About motion design
Should I use a GIF or a video?+
On a website, video. The same 11 second clip is 25 MB as a GIF and about 230 KB as an AV1 video; GIF is also limited to 256 colors, so gradients band. I only recommend GIF where video cannot play, such as email newsletters or GitHub README files.
Will it slow down my site?+
Not when it is embedded correctly. The video ships with preload="none", so on page load only a 20-40 KB poster image is fetched. Playback starts once at least a quarter of the video is on screen and stops when it scrolls out or the tab is in the background. It never plays for users with 'reduce motion' turned on.
Do you deliver in Instagram Reels format?+
Yes. For Reels and TikTok I deliver 1080x1920 (9:16), 30 fps, H.264 MP4. Titles and logos sit inside the safe area, clear of the top and bottom zones covered by the app interface. 1:1 and 4:5 feed versions can be cut from the same composition.
What is the turnaround time?+
A logo sting takes 3-5 business days, a website hero loop 4-7, a product or UI demo loop 5-10. Once a kinetic typography Reels template is set up, each new video usually ships in 1 business day. The faster the storyboard is approved, the shorter the schedule.
What do I need to send for a logo animation?+
A vector logo file (SVG, AI or PDF), your brand font files or names, and color codes. If you have no vector file, redrawing the logo can be added to the package.
Can I update the video later myself?+
For text changes just message me; since the composition is built in code, a re-render with new copy takes minutes. If you prefer, I also hand over the source composition so anyone who knows HTML can change text and colors.
RELATED SERVICES