[{"data":1,"prerenderedAt":660},["ShallowReactive",2],{"\u002Fprojects\u002Ffilmstro-premiere-pro":3,"all-projects":343},{"id":4,"title":5,"beforeAfterImages":6,"body":12,"category":263,"challenge":264,"client":243,"description":245,"duration":265,"extension":266,"featured":267,"galleryImages":268,"goals":278,"heroImage":10,"image":10,"meta":288,"metrics":289,"navigation":267,"path":299,"process":300,"results":319,"seo":320,"services":321,"solution":326,"stem":327,"summary":328,"technicalDetails":329,"technologies":330,"url":240,"year":341,"__hash__":342},"projects\u002Fprojects\u002Ffilmstro-premiere-pro.md","Filmstro Pro for Premiere Pro",[7],{"title":8,"before":9,"after":10,"description":11},"From Browser to Native Panel","\u002Fimages\u002Ffilmstro-browse.png","\u002Fimages\u002Fprojects\u002Ffilmstro-premiere-browse.png","Transformed the browser-based editing experience into a native Premiere Pro panel with full timeline integration, playhead sync, and direct audio import.",{"type":13,"value":14,"toc":244},"minimark",[15,20,25,29,33,49,53,56,60,63,67,70,74,77,81,84,88,91,95,98,101,105,108,172,175,177,181,209,211,215,229,231],[16,17,19],"h2",{"id":18},"key-features","Key Features",[21,22,24],"h3",{"id":23},"music-library-inside-premiere-pro","Music Library Inside Premiere Pro",[26,27,28],"p",{},"Browse a curated library of professionally composed tracks without leaving your project. Search by genre, mood, or composer with instant fuzzy search results. Organized into collections and albums for fast discovery.",[21,30,32],{"id":31},"real-time-music-shaping","Real-Time Music Shaping",[26,34,35,36,40,41,44,45,48],{},"Three intuitive sliders — ",[37,38,39],"strong",{},"Momentum",", ",[37,42,43],{},"Depth",", and ",[37,46,47],{},"Power"," — let editors reshape any track's energy, emotion, and intensity in real-time. Move a slider and hear the music change instantly. No music production knowledge required.",[21,50,52],{"id":51},"adaptive-duration","Adaptive Duration",[26,54,55],{},"Select a section of your video and the music automatically adjusts to fit. The algorithm extends or shortens tracks using musically-intelligent loop points — transitions always land on the beat, preserving the composition's integrity.",[21,57,59],{"id":58},"timeline-automation","Timeline Automation",[26,61,62],{},"Record slider movements in real-time as your video plays, creating dynamic musical arcs that follow your story's pacing. Or draw curves manually with freehand tools for precise control over every moment.",[21,64,66],{"id":65},"multi-stem-mixer","Multi-Stem Mixer",[26,68,69],{},"Each track is broken into individual stems (drums, bass, melody, etc.) with independent volume, mute, and solo controls. Mix the music to sit perfectly with dialogue and sound effects.",[21,71,73],{"id":72},"one-click-export-to-timeline","One-Click Export to Timeline",[26,75,76],{},"Render your customized track and import it directly into your Premiere Pro timeline at the exact playhead position. No file management, no dragging from Finder.",[21,78,80],{"id":79},"midi-controller-support","MIDI Controller Support",[26,82,83],{},"Connect hardware faders and knobs to drive the three music sliders physically — ideal for editors who want a tactile, hands-on mixing experience.",[21,85,87],{"id":86},"session-management","Session Management",[26,89,90],{},"Save and restore edit sessions. Come back to a project days later and pick up exactly where you left off, with all slider automation, duration settings, and stem mixes preserved.",[21,92,94],{"id":93},"premiere-pro-timeline-sync","Premiere Pro Timeline Sync",[26,96,97],{},"The extension reads your timeline's playhead, In\u002FOut markers, and framerate. Sync your music edits to the video timeline for frame-accurate scoring.",[99,100],"hr",{},[16,102,104],{"id":103},"licensing-model","Licensing Model",[26,106,107],{},"The extension uses a freemium model with audio watermarking as the upgrade gate:",[109,110,111,126],"table",{},[112,113,114],"thead",{},[115,116,117,120,123],"tr",{},[118,119],"th",{},[118,121,122],{},"Free",[118,124,125],{},"Licensed",[127,128,129,140,151,162],"tbody",{},[115,130,131,135,138],{},[132,133,134],"td",{},"Browse full library",[132,136,137],{},"Yes",[132,139,137],{},[115,141,142,145,148],{},[132,143,144],{},"Preview tracks",[132,146,147],{},"Watermarked",[132,149,150],{},"Clean audio",[115,152,153,156,159],{},[132,154,155],{},"Edit & customize",[132,157,158],{},"Locked",[132,160,161],{},"Full access",[115,163,164,167,169],{},[132,165,166],{},"Export to timeline",[132,168,147],{},[132,170,171],{},"Production-ready",[26,173,174],{},"Free users can explore and preview the entire library. The upgrade prompt appears naturally when they try to edit or export — no paywalls blocking discovery.",[99,176],{},[16,178,180],{"id":179},"what-i-built","What I Built",[182,183,184,188,191,194,197,200,203,206],"ul",{},[185,186,187],"li",{},"Custom real-time audio engine with multi-stem playback, seamless looping, and offline rendering",[185,189,190],{},"SVG-based timeline editor with keyframe automation, multiple editing modes (select, draw, record), and zoom controls",[185,192,193],{},"Bidirectional Premiere Pro integration — reading timeline state and importing rendered audio via ExtendScript",[185,195,196],{},"Adaptive music algorithm that intelligently extends or shortens compositions while preserving musical structure",[185,198,199],{},"Freemium licensing system with audio watermarking, encrypted credential storage, and background token validation",[185,201,202],{},"Full keyboard shortcut system (20+ shortcuts) mirroring professional NLE conventions",[185,204,205],{},"Local-first data architecture with incremental sync — the extension works offline after first load",[185,207,208],{},"Session persistence — full project state serialized and restored across sessions",[99,210],{},[16,212,214],{"id":213},"platforms","Platforms",[182,216,217,220,223,226],{},[185,218,219],{},"macOS (Intel + Apple Silicon)",[185,221,222],{},"Windows",[185,224,225],{},"Adobe Premiere Pro 2024+",[185,227,228],{},"Distributed as a signed .zxp extension",[99,230],{},[26,232,233],{},[234,235,236,237],"em",{},"Built as a freelance project for ",[238,239,243],"a",{"href":240,"rel":241},"https:\u002F\u002Ffilmstro.com",[242],"nofollow","Filmstro",{"title":245,"searchDepth":246,"depth":246,"links":247},"",2,[248,260,261,262],{"id":18,"depth":246,"text":19,"children":249},[250,252,253,254,255,256,257,258,259],{"id":23,"depth":251,"text":24},3,{"id":31,"depth":251,"text":32},{"id":51,"depth":251,"text":52},{"id":58,"depth":251,"text":59},{"id":65,"depth":251,"text":66},{"id":72,"depth":251,"text":73},{"id":79,"depth":251,"text":80},{"id":86,"depth":251,"text":87},{"id":93,"depth":251,"text":94},{"id":103,"depth":246,"text":104},{"id":179,"depth":246,"text":180},{"id":213,"depth":246,"text":214},"Desktop Extension","Video editors waste hours jumping between music libraries, DAWs, and their timeline trying to find and fit music to their edits. Tracks are never the right length. The mood doesn't match scene transitions. Licensing is confusing. The workflow is broken.","Ongoing","md",true,[269,272,274,276],{"url":270,"alt":271},"\u002Fimages\u002Ffilmstro-premiere-pro.png","Filmstro Pro panel inside Adobe Premiere Pro",{"url":270,"alt":273},"Three inflection sliders with real-time waveform",{"url":270,"alt":275},"SVG timeline editor with recorded automation curves",{"url":270,"alt":277},"Stem mixer with per-track metering",[279,280,281,282,283,284,285,286,208,287],"Build a complete music editing environment inside a Premiere Pro panel using Adobe CEP","Browse a curated library of tracks with instant fuzzy search — without leaving the project","Three intuitive sliders (Momentum, Depth, Power) to reshape any track's energy, emotion, and intensity in real-time","Adaptive duration algorithm that extends or shortens tracks using musically-intelligent loop points","Record slider movements in real-time or draw automation curves for precise control","Multi-stem mixer with independent volume, mute, and solo controls per stem","One-click export — render and import directly into the Premiere Pro timeline","MIDI controller support for tactile, hands-on mixing","Premiere Pro timeline sync — reads playhead, In\u002FOut markers, and framerate",{},[290,293,296],{"value":291,"label":292},"Engine","Custom Audio Engine",{"value":294,"label":295},"20+","Keyboard Shortcuts",{"value":297,"label":298},".zxp","Signed Extension","\u002Fprojects\u002Ffilmstro-premiere-pro",[301,304,307,310,313,316],{"title":302,"description":303},"Find a track","Search or browse by mood, genre, or collection.",{"title":305,"description":306},"Preview it","Hit play and adjust sliders to hear how the music can change.",{"title":308,"description":309},"Open the editor","Full timeline view with stem mixer and keyframe controls.",{"title":311,"description":312},"Fit to video","Set your In\u002FOut points and the music adapts to match the duration.",{"title":314,"description":315},"Record your mix","Play the video and move sliders in real-time, or draw automation curves.",{"title":317,"description":318},"Export","One click renders the final audio and drops it into your Premiere Pro timeline.","The extension delivers a complete music editing workflow inside Premiere Pro, eliminating the context-switching that previously required juggling a browser, DAW, and NLE. Video editors can now find, customize, and export adaptive music without leaving their timeline. The freemium model with audio watermarking as the upgrade gate allows full library exploration before purchase.",{"title":5,"description":245},[322,323,324,325],"Extension Development","Product Management","Algorithm Design","Premiere Pro Deployment","Filmstro Pro is an Adobe Premiere Pro panel that gives editors a full music customization studio inside their existing workflow. No tab-switching, no external tools, no round-tripping audio files. The user flow is simple: Search → Preview → Edit → Shape → Export → Done.","projects\u002Ffilmstro-premiere-pro","Adaptive music for video editors. Browse, customize, and export production-ready music tracks — all inside Premiere Pro.","Custom real-time audio engine with multi-stem playback, seamless looping, and offline rendering. SVG-based timeline editor with keyframe automation, multiple editing modes (select, draw, record), and zoom controls. Bidirectional Premiere Pro integration — reading timeline state and importing rendered audio via ExtendScript. Adaptive music algorithm that intelligently extends or shortens compositions while preserving musical structure. Freemium licensing system with audio watermarking, encrypted credential storage, and background token validation. Full keyboard shortcut system (20+ shortcuts) mirroring professional NLE conventions. Local-first data architecture with incremental sync — the extension works offline after first load. Session persistence — full project state serialized and restored across sessions. Distributed as a signed .zxp extension for macOS (Intel + Apple Silicon) and Windows, targeting Adobe Premiere Pro 2024+.",[331,332,333,334,335,336,337,338,339,340],"Vue 3","TypeScript","Tailwind CSS","Tone.js","Pinia","Vite","ExtendScript","WebMIDI","Fuse.js","PostHog","2026","qgwwtRE8qCJeKeGpYCiGO60cp1-TX3FAFMpq8bzhEdI",[344,414,599],{"id":345,"title":346,"beforeAfterImages":347,"body":351,"category":355,"challenge":356,"client":243,"description":245,"duration":265,"extension":266,"featured":267,"galleryImages":357,"goals":366,"heroImage":9,"image":9,"meta":372,"metrics":373,"navigation":267,"path":382,"process":383,"results":395,"seo":396,"services":397,"solution":401,"stem":402,"summary":403,"technicalDetails":404,"technologies":405,"url":411,"year":412,"__hash__":413},"projects\u002Fprojects\u002Ffilmstro-music-platform.md","Filmstro Pro",[348],{"title":349,"before":9,"after":9,"description":350},"Timeline Editor Evolution","Evolved the timeline from a simple waveform display into a full plugin-based editor with draw mode, keyframes mode, selection mode, and combined hybrid mode — supporting 24, 30, and 60 FPS with frame-accurate timing.",{"type":13,"value":352,"toc":353},[],{"title":245,"searchDepth":246,"depth":246,"links":354},[],"Web Application","Filmstro needed a full-featured music-to-video editing platform that runs entirely in the browser. Content creators and filmmakers needed to browse thousands of royalty-free tracks, adjust music parameters in real-time, and automatically synchronize audio dynamics to video content — without installing any software. The core technical challenge was building a performant audio engine with real-time parameter control, an SVG-based timeline editor with multiple interaction modes, and an intelligent auto-sync algorithm that maps music to footage naturally.",[358,360,362,364],{"url":9,"alt":359},"Filmstro Pro music browser with category filtering",{"url":9,"alt":361},"Real-time audio parameter sliders and waveform editor",{"url":9,"alt":363},"SVG-based timeline editor in combined mode",{"url":9,"alt":365},"Stems mixer with per-track controls",[367,368,369,370,371],"Build a real-time audio engine with dynamic parameter sliders using Web Audio API and Tone.js","Create an intelligent auto-sync algorithm that matches music dynamics to video content","Develop an SVG-based timeline editor with draw, keyframe, selection, and hybrid modes","Implement MIDI controller support for hardware-based parameter mapping","Design a searchable music library with fuzzy search across thousands of tracks",{},[374,377,379],{"value":375,"label":376},"63","Vue Components",{"value":294,"label":378},"Timeline Modules",{"value":380,"label":381},"Custom","Auto-Sync Algorithm","\u002Fprojects\u002Ffilmstro-music-platform",[384,387,390,392],{"title":385,"description":386},"Audio Architecture","Designed the singleton audio controller pattern and Web Audio API integration with Tone.js, ensuring a single shared audio context across all components to prevent resource contention.",{"title":388,"description":389},"Timeline System","Built the SVG-based timeline editor with a plugin architecture supporting four interaction modes, frame-accurate timing at multiple FPS rates, and custom intersection detection for keyframe manipulation.",{"title":381,"description":391},"Developed the synchronization algorithm that analyzes video content timing and maps music parameters to create natural dynamics without manual keyframing.",{"title":393,"description":394},"Music Library & Search","Implemented client-side fuzzy search with Fuse.js across the 3.8MB music dataset, with weighted scoring (title: 50, composer: 10, category: 5) tuned for music discovery UX.","The platform serves as the primary editing tool for Filmstro's user base of content creators, filmmakers, and YouTubers. The auto-sync algorithm eliminated the need for manual keyframing, dramatically reducing the time to produce synced music-video content. The plugin-based timeline architecture enabled rapid iteration across four major versions while maintaining backwards compatibility.",{"title":346,"description":245},[398,399,324,400],"Frontend Development","Audio Engineering","UX\u002FUI Design","Built a Vue 3 single-page application with a plugin-based architecture. The audio engine uses a singleton composable (useSound) wrapping Tone.js and the Web Audio API for real-time parameter manipulation with zero-latency feedback. The timeline editor is built on SVG.js with a PluginManager that dynamically loads interaction modes. The auto-sync algorithm analyzes video timing and intelligently maps music dynamics to create natural-sounding synchronization. A stems mixer allows decomposing tracks into individual audio layers. Session state persists via IndexedDB through LocalForage, and Fuse.js powers weighted fuzzy search across the full music catalog loaded client-side.","projects\u002Ffilmstro-music-platform","Built a browser-based music-to-video editor with real-time audio engine, custom auto-sync algorithm, SVG timeline editor, and MIDI controller support — all running client-side.","The application is a Vue 3 SPA with Vuex 4 for state management across 6 namespaced modules (auth, browse, edit, audio, sessions, favourites). The audio engine uses a singleton useSound() composable maintaining a shared Web Audio context, with Tone.js handling synthesis and scheduling. The timeline editor is built on SVG.js 3.2 with draggable and panzoom plugins, using a PluginManager to dynamically load Draw, KeyFrames, Selection, and Combined modes — four major versions coexist for backwards compatibility. MIDI controller support is implemented via the WebMIDI API, allowing hardware mapping to audio parameters. The music library (3.8MB dataset) is loaded once and searched client-side via Fuse.js with pre-built indexes cached on the window object. Sessions persist through IndexedDB via LocalForage with multiple save slots. The app supports 44.1kHz and 48kHz sample rates for export compatibility. Environment configuration is resolved at runtime by hostname detection across local, dev, and live environments.",[406,334,407,408,409,410],"Vue.js","Web Audio API","SVG.js","Vuex","SASS","https:\u002F\u002Fapp.filmstro.com","2022","hHHDLKQ0bhyCa0g5GSXJGGPsuQdusqLAytmv8JQjZ8s",{"id":4,"title":5,"beforeAfterImages":415,"body":417,"category":263,"challenge":264,"client":243,"description":245,"duration":265,"extension":266,"featured":267,"galleryImages":578,"goals":583,"heroImage":10,"image":10,"meta":584,"metrics":585,"navigation":267,"path":299,"process":589,"results":319,"seo":596,"services":597,"solution":326,"stem":327,"summary":328,"technicalDetails":329,"technologies":598,"url":240,"year":341,"__hash__":342},[416],{"title":8,"before":9,"after":10,"description":11},{"type":13,"value":418,"toc":562},[419,421,423,425,427,435,437,439,441,443,445,447,449,451,453,455,457,459,461,463,465,467,469,515,517,519,521,539,541,543,553,555],[16,420,19],{"id":18},[21,422,24],{"id":23},[26,424,28],{},[21,426,32],{"id":31},[26,428,35,429,40,431,44,433,48],{},[37,430,39],{},[37,432,43],{},[37,434,47],{},[21,436,52],{"id":51},[26,438,55],{},[21,440,59],{"id":58},[26,442,62],{},[21,444,66],{"id":65},[26,446,69],{},[21,448,73],{"id":72},[26,450,76],{},[21,452,80],{"id":79},[26,454,83],{},[21,456,87],{"id":86},[26,458,90],{},[21,460,94],{"id":93},[26,462,97],{},[99,464],{},[16,466,104],{"id":103},[26,468,107],{},[109,470,471,481],{},[112,472,473],{},[115,474,475,477,479],{},[118,476],{},[118,478,122],{},[118,480,125],{},[127,482,483,491,499,507],{},[115,484,485,487,489],{},[132,486,134],{},[132,488,137],{},[132,490,137],{},[115,492,493,495,497],{},[132,494,144],{},[132,496,147],{},[132,498,150],{},[115,500,501,503,505],{},[132,502,155],{},[132,504,158],{},[132,506,161],{},[115,508,509,511,513],{},[132,510,166],{},[132,512,147],{},[132,514,171],{},[26,516,174],{},[99,518],{},[16,520,180],{"id":179},[182,522,523,525,527,529,531,533,535,537],{},[185,524,187],{},[185,526,190],{},[185,528,193],{},[185,530,196],{},[185,532,199],{},[185,534,202],{},[185,536,205],{},[185,538,208],{},[99,540],{},[16,542,214],{"id":213},[182,544,545,547,549,551],{},[185,546,219],{},[185,548,222],{},[185,550,225],{},[185,552,228],{},[99,554],{},[26,556,557],{},[234,558,236,559],{},[238,560,243],{"href":240,"rel":561},[242],{"title":245,"searchDepth":246,"depth":246,"links":563},[564,575,576,577],{"id":18,"depth":246,"text":19,"children":565},[566,567,568,569,570,571,572,573,574],{"id":23,"depth":251,"text":24},{"id":31,"depth":251,"text":32},{"id":51,"depth":251,"text":52},{"id":58,"depth":251,"text":59},{"id":65,"depth":251,"text":66},{"id":72,"depth":251,"text":73},{"id":79,"depth":251,"text":80},{"id":86,"depth":251,"text":87},{"id":93,"depth":251,"text":94},{"id":103,"depth":246,"text":104},{"id":179,"depth":246,"text":180},{"id":213,"depth":246,"text":214},[579,580,581,582],{"url":270,"alt":271},{"url":270,"alt":273},{"url":270,"alt":275},{"url":270,"alt":277},[279,280,281,282,283,284,285,286,208,287],{},[586,587,588],{"value":291,"label":292},{"value":294,"label":295},{"value":297,"label":298},[590,591,592,593,594,595],{"title":302,"description":303},{"title":305,"description":306},{"title":308,"description":309},{"title":311,"description":312},{"title":314,"description":315},{"title":317,"description":318},{"title":5,"description":245},[322,323,324,325],[331,332,333,334,335,336,337,338,339,340],{"id":600,"title":601,"beforeAfterImages":602,"body":610,"category":614,"challenge":615,"client":616,"description":245,"duration":617,"extension":266,"featured":267,"galleryImages":618,"goals":627,"heroImage":605,"image":605,"meta":632,"metrics":633,"navigation":267,"path":634,"process":635,"results":647,"seo":648,"services":649,"solution":652,"stem":653,"summary":654,"technicalDetails":655,"technologies":656,"url":657,"year":658,"__hash__":659},"projects\u002Fprojects\u002Fnivea-skincare-website.md","Nivea Product Recommendation Web Finder",[603,607],{"title":604,"before":605,"after":605,"description":606},"Survey Flow","\u002Fimages\u002Fnivea-skincare.png","We built a guided question flow to capture skin type, concerns, and user preferences before showing product recommendations.",{"title":608,"before":605,"after":605,"description":609},"Face Analysis","Users could take a photo and receive additional skincare recommendations based on face analysis handled by an external API.",{"type":13,"value":611,"toc":612},[],{"title":245,"searchDepth":246,"depth":246,"links":613},[],"Web App","Nivea UK needed an interactive web app that could help customers find suitable skincare products without manually browsing the full catalogue. The experience needed to combine a guided skin-type survey with a face analysis flow powered by an external API.","Nivea","4-5 months",[619,621,623,625],{"url":605,"alt":620},"Nivea product recommendation finder",{"url":605,"alt":622},"Nivea skincare survey flow",{"url":605,"alt":624},"Nivea face analyser flow",{"url":605,"alt":626},"Nivea recommended products screen",[628,629,630,631],"Create a guided skincare questionnaire","Recommend products based on user responses","Integrate face analysis through an external API","Build a responsive Vue.js frontend for Nivea UK",{},[],"\u002Fprojects\u002Fnivea-skincare-website",[636,639,641,644],{"title":637,"description":638},"Discovery & Research","Reviewed the product recommendation requirements, user journey, and API integration points for the skincare finder.",{"title":604,"description":640},"Built the frontend logic for the guided questionnaire, including dynamic steps based on skin type and user responses.",{"title":642,"description":643},"Development","Led the Vue.js frontend development, creating a responsive web app experience for Nivea UK.",{"title":645,"description":646},"Integration & Testing","Integrated external APIs for face analysis and product recommendation data, then tested the experience across devices.","The project delivered a customer-facing product recommendation web app for Nivea UK while I was working at Atom42. The final experience helped users discover skincare products through a guided survey and optional face analysis, rather than browsing the catalogue manually.",{"title":601,"description":245},[398,650,651],"API Integration","Lead Development","While working at Atom42, I acted as lead developer on a Vue.js web app for Nivea UK. We built an interactive product recommendation experience that guided users through questions about their skin type, such as oily or dry skin, and used the answers to recommend suitable skincare products. The app also included a face analyser flow, where users could take a photo and receive results generated through an external API.","projects\u002Fnivea-skincare-website","Built a Vue.js product recommendation web app for Nivea UK, guiding users through skin-type questions and face analysis to recommend suitable skincare products.","The frontend was built with Vue.js and connected to external APIs used by the recommendation and face analysis flows. The survey captured user skin concerns and skin type, then used that data to present relevant skincare products. The face analyser allowed users to take a photo and receive additional results through a third-party analysis API.",[406],"https:\u002F\u002Fwww.nivea.co.uk\u002Fadvice\u002Ffindmyroutine","2023","CjJibSlg7Tub367T7ZeQhBgALU5vwA9UiCHWlwYITWQ",1779233001474]