The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Andar aao, roshni ke saath.
Come in, with the light.
Walk into Wazir Khan Mosque or the Lahore Fort in the afternoon and the first thing you notice isn't the walls. It's the floor. Sunlight comes through a carved screen and lands as a hundred little stars on the stone.
That screen is a jaali. A wall that refuses to be a wall.
Mughal builders carved them out of sandstone and marble so a room could breathe. Air gets in, heat stays out, and anyone inside can see the courtyard without the courtyard seeing them. Privacy and light at the same time, cut by hand, one star at a time.
Hundreds of years later they still do the same job. Nobody needed them to be this beautiful. The carvers made them beautiful anyway.
This is Jaali.
• Press play and the lattice opens off the picture, like stepping out from behind the screen. Pause, and it closes again.
• The seek bar is a row of carved lattice stars. Every star you've watched lights up, and the one just ahead glows like sun through the stone.
• Shafts of light fall across the sandstone frame while the video plays.
• The transport buttons are cream inlay with lapis blue, the way pietra dura is set into marble.
• The frame itself is carved wood, vines and stars, the kind you'd find around an old haveli window.
Under the carving it's a real Video.js v10 player. Keyboard, captions and fullscreen all work, and fullscreen keeps the controls.
The song in the demo is Chaap Tilak, words by Amir Khusro, sung by Abida Parveen and Rahat Fateh Ali Khan for Coke Studio. Seven hundred years old, and it still fills a room the way light does.
Step inside, slowly.
Built in Lahore. Music in the demo video: Abida Parveen and Rahat Fateh Ali Khan, Coke Studio.
View project: https://jaali-kappa.vercel.app
#videojsskinschallenge #videojs #webdesign #uidesign #frontend #css #javascript #mughalarchitecture #islamicart #lahore #designinspiration
A jaali as a player, a wall that refuses to be a wall. Beautiful reference.
The jaali lattice opening off the picture when you press play is beautiful — stepping out from behind the screen is exactly the right metaphor for a Mughal carved screen. The seek bar as a row of lattice stars, lighting up as you watch, is a lovely detail too. If you have a...
Using the jaali as the thing that opens on play is such a strong idea. The light coming through the screen isn't decoration, it's the whole meaning of the player. And the seek bar as a row of lattice stars lighting up as you watch ties it together. One of the most original concepts in the challenge for me.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
Turn Four: Every Frame on the Racing Line
Turn Four turns the replay timeline into a circuit. Drag around the oval to seek, choose one of four sectors, loop a detail, slow it down, or mark a moment to revisit. Warm paper, graphite control surfaces, condensed typography, and signal orange give the interface its motorsports character. Video.js 10 handles the player, with keyboard controls, visible focus, descriptive captions, responsive layouts, and reduced-motion styling. The fictional automotive concept film moves through dusk, daylight, night, and an overhead composition so the controls can be judged against changing images.
racing line replays are weirdly satisfying to watch. is this running on real telemetry?
Who wants to come to a picnic with an outdoor movie? I'll bring the video player 🧺🎬
Picnic Cinema is my new Video.js skin: a 3D garden cinema where the controls hang as tags from festoon bulbs. The lights glow when you pause and dim when the film starts.
Too comfy to reach the bulbs? Grab the remote on the picnic table.
You can still use the keyboard like a normal player: Space to play, arrows to seek and change the volume, F for fullscreen.
this is such a fun concept!
Lightline. A video player drawn around one line of of light.
I entered the Video.js skins challenge with a player called Lightline.
One line of light runs it. The line shows where you are in the film. Its color shows what the film is doing.
Two layouts. Cinema leaves the film alone on the screen. Suite sets the tools beside it. An audio lab. Guides over the picture. A timeline you can read. More than 50 languages.
The video is the player playing its own opening.
Go break it: https://frederickdesign.studio/lightline
Then tell me what broke.
One line of light doing all the work, very elegant.