The frame on screen
Cards and the map pin follow the frame on screen, not the video's clock, which runs a few frames ahead.
Adnika Motion
A homepage film for Concept Plus needed scenes set and timed in Elementor, in a plugin we could use again on the next site.
:quality(78))
Key details
We built Adnika Motion, an Elementor plugin whose Scroll Scene widget plays a film in WebGL as the visitor scrolls. Cards, a room navigator, a floor-plan map, wall screens and sound are all timed to the film and set in the widget's panels.
- Client
- Adnika (our own product)
- Industry
- WordPress plugin
- Location
- Dubai, UAE
- Year
- 2026
- Live site
- conceptplus.ae
Adnika Motion
Scroll Scene for Elementor
-
:quality(78))
Scene 01 / In Elementor
Scroll Scene sits in its own Adnika Motion group in Elementor, with a panel for each part of the scene.
-
:quality(78))
Scene 02 / Timeline overlays
Each card has a start and end time on the film, its own entrance and an optional glass panel.
-
:quality(78))
Scene 03 / Scene navigator
Cards given a title join the navigator, which moves the film to that room.
-
:quality(78))
Scene 04 / Map overlay
A floor plan whose pin follows the camera, with waypoints placed on the page itself in the Map Builder.
-
:quality(78))
Scene 05 / Wall screens
A second video plays on a wall inside the film, held in place frame by frame by tracking data.
-
:quality(78))
Scene 06 / Video sizes
The widget picks one of three film sizes for each visitor, who switches it in the quality menu.
-
:quality(78))
Scene 07 / Closing panel
Near the end of the film, a button opens a numbered list of links to the site's pages.
-
:quality(78))
Scene 08 / On conceptplus.ae
The first scene built with it walks visitors from the street into the Concept Plus building, room by room.
Overview
Adnika Motion is our own WordPress plugin for Elementor. We built it in 2026 for the Concept Plus homepage, where scrolling walks visitors through a film of the group's building. We kept it as our own product for the next scene. Its first widget, Scroll Scene, plays the film in WebGL and times everything on screen to the film.
This page covers why we built it, what the widget does and where it runs today.
The challenge
A film played by scrolling had to answer at once and stay editable without code.
Every frame on demand
A visitor stops scrolling anywhere, and the frame has to appear at once. Ordinary video exports skip frames when they are scrubbed quickly.
Words in step with the picture
A card has to appear with its own frame. The browser reports the video's time a few frames ahead of the picture on screen.
Built for editors
Rooms, captions, timings and the floor plan had to be settings in Elementor, so changes after launch happen in the editor.
One film, many screens
A large screen on a fast connection and a phone on mobile data need different files. A phone held upright has little room for a wide film.
More than one site
It was built for one homepage, as a product for the next scene too.
What we did
-
An Elementor widget
Adnika Motion adds a Scroll Scene widget to Elementor, in its own Adnika Motion group. Its settings sit in panels on the Content and Style tabs, from the video files to the cards, navigator, map, wall screens and sound.
-
Sized for each visitor
The widget takes the film in 4K, 1080p and 720p and picks one from the screen, the connection and the device. A quality menu lets the visitor change it, and phones held upright are asked to turn sideways.
-
Find it in the panel
Search the Elementor panel for Scroll Scene and drag it onto a page. It sits in its own Adnika Motion group.
:quality(78))
-
Cards on the film's clock
Each card has a start and end time, a heading, text and a button, an entrance by word or line, and an optional glass panel.
:quality(78))
-
A navigator and a floor plan
Cards given a title join a navigator, which moves the film to that room. Beside it, a pin on the floor plan follows the camera between waypoints placed in the Map Builder.
:quality(78))
:quality(78))
-
A panel for each part
Video, scroll behaviour, overlays, navigator, map, wall screens, audio and loading each have their own panel in the widget.
:quality(78))
-
Drawn in WebGL
The film is drawn with Three.js on a WebGL canvas. GSAP ScrollTrigger pins the scene, Lenis smooths the scroll, and the cards follow the frame on screen.
-
Every frame stored whole
The film is encoded so that every frame is a key frame, which lets scrolling stop on any frame. The plugin's readme carries the ffmpeg settings.
Built with
- WordPress Plugin platform
- Elementor The widget and its panels
- Three.js Drawing the film in WebGL
- GSAP ScrollTrigger Pinning the scene and scroll timing
- Lenis Smooth scrolling
- ffmpeg Encoding the film frame by frame
- Wall-screen tracker (our tools) Tracking data for the wall screens
- Cloudflare R2 Film storage on conceptplus.ae
Plugin map
- Timed to the film
- No screen to open
Select a page to open its screen.
What Adnika has now
- A Scroll Scene widget in Elementor that plays a film in WebGL as visitors scroll.
- Cards, a room navigator, a floor-plan map, wall screens and sound, all timed to the film and set in panels.
- A Map Builder for placing the map's waypoints on the page itself.
- A film that picks its size for each visitor, with a quality menu to change it.
- The plugin behind the conceptplus.ae homepage, kept as our own product for the next scene.
Why it worked
It works because the film is the clock for everything
Every card, room, pin, wall screen and sound cue is set against the film's own seconds. What the visitor reads matches the frame on screen.
Settings, not code
Times, text, rooms and waypoints are fields in Elementor, so a scene is edited after launch, not rebuilt.
Sized for each visitor
The widget picks 4K, 1080p or 720p for the screen and connection, and the visitor switches in the quality menu.
Built as a product
Adnika Motion is our own plugin, so the next scene starts from a working widget rather than a blank page.
Client stories
What clients say
On camera and in writing — swipe through the founders and teams we’ve helped design, build and grow.
In their words
★★★★★
GMC is thrilled to extend our heartfelt appreciation to Adnika! Collaborating with Ehsan and his team has consistently been an absolute delight. Ehsan's dedication and commitment have ensured that German Medical Center remains an exceedingly satisfied and happy client, especially regarding their Hubspot Onboarding, Digital Marketing, Website Development, Content Creation and Social Media Marketing. Adnika is indeed the Best Digital and Growth Marketing Agency in UAE!
★★★★★
Adnika provided us with their Inbound Sales and Marketing solutions through Hubspot. They helped us generate more qualified leads for our sales team, drive website traffic, increase customer engagement, and grow our customer base. Adnika is a reliable partner that has always taken our specific goals and needs seriously.
★★★★★
Adnika has helped us plan, implement and optimize ad campaigns on Facebook and Instagram. Adnika is truly committed to Performance Marketing. They provided us with a fantastic dashboard with detailed KPIs that helped us track the campaigns’ performance in real time. Adnika also gave us helpful and dedicated support during the whole project, and the campaigns turned out to be a great success. We highly recommend working with Adnika's growth experts.
★★★★★
We really enjoyed working with Adnika’s team. Not only are they talented, but they all take the time to understand whom they're working with, what they're trying to accomplish, and how to help the business achieve its goals. The quality of work we've experienced has made a huge difference for us and helped drive new business.
★★★★★
Adnika helped Sea Technology with setting up new digital channels, such as Google Search Ads, to attract more customers and leverage our brand. We are very satisfied with the results and we will continue with the implementation of lead generation, marketing automation, and performance marketing.
★★★★★
Working with the Adnika team has been a real pleasure! Extremely friendly, Ehsan and Elin are always available with prompt replies, valuable insights, patience, a problem-solving attitude, and high knowledge. Super easy to work with them. I highly recommend the Adnika team to help your business!
★★★★★
I am an artist, but I also manage a collective of DJs. In order to promote our services to our clients, we needed Inbound solutions that could attract the right traffic and promote the brand. Adnika built and designed our Inbound processes as well as create and manage campaigns on social media and Google Ads which helped us attract many more customers. I’m very happy!
★★★★★
We've been using Adnika growth marketing solutions only for a few months. They are highly professional, competent, experienced, and creative. Get ready to get to work with this agency. They will come alongside you as a business owner and feel your pain and joy! Get ready to transform your business.
About this project
Questions about this engagement
What clients ask us after reading this case study.
Our own WordPress plugin for Elementor. Its Scroll Scene widget plays a film in WebGL as the visitor scrolls. Cards, a room navigator, a floor-plan map, wall screens and sound are timed to the film.
WordPress with Elementor, and the film as an MP4 encoded so every frame is a key frame, which lets scrolling stop on any frame. On conceptplus.ae the film streams from Cloudflare R2.
Yes, with the phone turned sideways. Held upright, the scene asks the visitor to turn the phone, and on phones the widget picks the light 720p file.
On the conceptplus.ae homepage, where it walks visitors through the group's building. Read the Concept Plus case study.
Yes. Adnika Motion is our plugin for this kind of scene in Elementor. See our interactive web development service.
No questions match — try another search.
More work
Other things we have built
- 01
Paria Ghorashi
A scroll-story website for a Dubai entrepreneur, advisor and public figure.
- 02
Arabland
A Dubai brokerage website with live CRM listings, map search and valuation tools.
- 03
German Medical Center
One English and Arabic website for every department of a Dubai Healthcare City clinic.
- 04
Concept Plus
A homepage film that walks visitors into the group's building as they scroll.
- 05
A2 Sweden
One WordPress site for a door hardware range, from smart locks to drawer slides.
- 06
Bafco
A Shopify store for a UAE office furniture maker, for single pieces and whole offices.
- 07
Interactive web development
How we build scroll-driven and animated websites.
Next step
Find out whether a scroll-driven film suits your homepage
A straight read of your homepage and your footage, with the findings written down, whether or not you work with us.