Frontend Engineer – 2D WebGL GSAP, WebCodecs

At Pencil, we are driving innovation in advertising technology through our state-of-the-art SaaS product, which harnesses Generative AI to redefine content creation. We're developing a next-generation Editor that enables users to compose rich media experiences on the web. The core of this system is a powerful, high-performance 2D WebGL renderer and an expressive GSAP-based animation engine.

We're looking for experienced Frontend Engineers to evolve our custom Front End library, extend our rendering pipeline, help design interactive animation systems, and ensure smooth, high-FPS performance on modern browsers.

🛠️ Responsibilities

Responsibilities will vary depending on your specific skills, but some of the things you might work on include:

• Develop, maintain, and optimize a 2D WebGL rendering systems for dynamic composition of text, shapes, images, and vector elements.
• Design reusable graphics components, layers, and rendering effects with GPU acceleration in mind.
• Implement smooth, timeline-based animations using GSAP, with control over nested timelines, custom easings, labels, and playback logic.
• Implement browser-based video processing pipelines using WebCodecs API.
• Build and manage muxing and demuxing systems for handling media containers (e.g., MP4/WebM).
• Integrate file read/write functionality using OPFS, allowing large media files to be saved and loaded persistently in the browser.

🔍 What We’re Looking For:

Whilst we don’t expect candidates to have all of these skills, some of the skills we’re looking for are:

2D WebGL Rendering

• Strong hands-on experience with WebGL for 2D rendering (not just Three.js or 3D).
• Understanding of rendering pipelines, shaders, buffers, blending modes, texture atlases, and batching.
• Ability to manage frame lifecycle, layering, and GPU resource optimization.

GSAP

• Expertise in using gsap.timeline() for orchestrating animations with to, from, fromTo tweens.
• Skilled in working with labels, nested timelines, and custom easings.
• Experience in handling playback control, animation state, and callbacks/events.

WebCodecs

• Solid experience with WebCodecs API: managing encoders/decoders, configuring frame formats and codecs.
• Familiarity with different video frame types (I/P/B frames), timestamp management, and latency handling.

Muxing / Demuxing

• Hands-on experience building or integrating muxers and demuxers (e.g., MP4/WebM).
• Understanding of container formats, segmenting, and stream metadata management.

OPFS (Origin Private File System)

• Experience with loading and saving binary/video data using OPFS.
• Handling persistent file storage and stream-based file writing in modern browsers.

Performance Optimization

• Experience profiling frame rendering and GPU usage.
• Familiarity with techniques like object pooling, offscreen rendering, and layer caching.

Interactivity & Composition

• Building interactive, event-driven animation systems.
• Working with user inputs, hit-testing, and real-time animation updates.

➕ Nice to Have

• Experience with PixiJS (v8), including sprites, filters, and event handling.
• Writing custom WebGL shaders for effects or text rendering.
• Background in creative tools, motion design systems, or visual editors.

Benefits:

• 25 days PTO plus public holidays, although we operate a Flexible Time Off scheme
• Health insurance / private medical cover
• Monthly stipend towards wellness, fitness, and learning and development
• Remote - work from anywhere in your home country
• Access to our Pencil office in The Shard, London
• We Work all access
• Flexible working hours