Meer Mohsin

Meer Mohsin put his own face on the first screen of his portfolio and then covered its eyes with a sigil. The sigil is drawn in the cyber-tattoo style known as cybersigilism, popular in recent years, with lines like thorns and wings grown together, and his site logo uses the same kind of shape. On the first screen the sigil works as a mask pressed onto a realistic portrait, and the contrast between a lifelike face and a sharp graphic is strong enough that visitors remember him at first sight.

The mask does not stay on the face for long, since it is actually a 3D model that leaves the portrait as soon as the visitor starts scrolling and stays with them to the end of the page. In each later section it sits in the middle of the picture, turning, sometimes near and sometimes far. At the bottom of the page it spins without stopping while a short sound effect plays, like the curtain coming down on a play.

The page itself follows the structure of an ordinary personal portfolio, but each section is told in a different way. The section about him carries the heading This Will Feel Different. The services section writes the three words LEGACY, UI/UX and 3D WEB as red script, each filling a whole screen, with a small window laid beside the word to show pictures.

The work section shows five projects, CODENARTS, AZ-DIGITAL-VENTURES, AMRON, CHATONE and FINANCE, each presented as a mockup on a monitor or tablet. When the visitor clicks any of them, a panel slides in from the left with the date, a description, the technologies used and a gallery.

After the work come a four-step section on his working method, a blog and a section of awards, and the closing line Every Great Story Needs A Powerful Ending rounds the page off. The awards section displays the two certificates this site has received from Awwwards, both made out to MEER MOHSIN. One is for Honors, meaning an Honorable Mention, dated 19 August, and the other is for Site of the Day dated 26 September. That second date is the very day this site won, so Meer Mohsin put the new certificate on his site on the day of the award.

Red and black are almost the only colours on this site. The deep red #990000 is the most common text colour on the page and also covers the largest area of background, followed by black, a dark grey #222 and white. The first screen and a few transitions use a gradient from pure black to bright red, while most other sections set red text on black or lay black text over a full screen of deep red.

The site uses only two typefaces, a sans-serif and a script, and each has a clear job. The sans-serif is Stack Sans Headline in regular and extra-light weights, and it sets nearly all the text on the site, including the navigation, the body text and the large scrolling words on the first screen. The script is called Ruthie, and although it appears in only a few places, it is the largest type on the site at up to 320 pixels, used for full-screen words such as LEGACY, 3D WEB and AWARDS. Setting a disciplined sans-serif beside a flamboyant script gives the page one cool voice and one hot one, and it keeps switching between the two.

The first screen is built from three layers, which from back to front are the text, the man and the sigil. The portrait sits in the centre while a line of large white text scrolls from right to left, passing behind the head so that the face seems to grow out of the words. The red sigil then sits on top of that face and covers both eyes. A narrow band stays fixed at the bottom of the page the whole time, reading TENSION, IMMERSION and IMPACT with plus signs between them, wherever the visitor scrolls. In the bottom right corner a small card reads ONLINE and Let's Connect, with his avatar and a red dot, like an online status in a messaging app.

Beyond the sigil, the rest of the imagery shares the same dark aesthetic. Flames, bloodstains and torn paper edges keep appearing at the edges of the page, and several portraits are desaturated black and white photographs marked with small red crosses. The work section is the exception, since its five projects are shown in glossy device mockups displaying client websites in purple and gold tones that break clearly from the red and black around them.

The awards section returns to a mostly red and black palette and is built as a 3D scene. Two cards styled as Awwwards certificates stand on a shattered red floor made of many sharp-edged polygons, with red light showing through the cracks. The sigil floats between the two certificates here as well, having travelled with the visitor all the way from the first screen.

The route the sigil takes down the page is driven entirely by the visitor's scrolling. As scrolling begins, it slides from the face down to the chin, then leaves the portrait and settles in the middle of each section that follows. Over the full length of the page it turns five complete times, retreating into the distance or floating upward depending on the section, and in the section on his working method it rises and fades out. When the visitor moves the cursor, it also turns slowly toward the cursor over 0.8 seconds, by only a few degrees. Once the visitor reaches the bottom of the page, the sigil starts spinning continuously, one turn every 8 seconds, while the closing sound effect plays.

The sigil can follow the scrolling because the ScrollTrigger plugin of the animation library GSAP ties its rotation and position to scroll progress. The five turns are spread over a long stretch of page, so the sigil spins fast when the visitor scrolls fast and stops when they stop. Scrolling itself is taken over by the smooth scrolling library Lenis, so the page glides on a little after the wheel stops and the sigil turns a little further with it. The tilt toward the cursor is a separate animation that never interferes with the scrolling.

The loading animation fills the whole screen with deep red, with a script number in the middle counting from 000 to 100 and a line of small text below reading CLICK ANYWHERE TO ACTIVATE THE EXPERIENCE. When the count reaches 100, an edge that looks as if it were burning eats away the red from the bottom up, revealing the black background and the first screen. Once the visitor clicks the page, background music starts looping at half volume.

Most of the other motion on the page comes from sections that are pinned in place while the visitor scrolls. The services, work and awards sections are held on screen for roughly eight, six and five and a half screens of scrolling respectively before they let go. Inside these sections the visitor sees the picture change on the spot rather than the page moving up. The large line of text on the first screen slides sideways by itself the whole time, and so does the line of script at the bottom of the page. Scrolling the whole page holds a steady 60 frames per second, about 16.7 milliseconds a frame, and the slowest frame is 27 milliseconds.

Meer Mohsin used no front-end framework and built the site from plain JavaScript bundled with Vite, with GSAP and ScrollTrigger for animation, Lenis for smooth scrolling and three.js for 3D. The sigil and the certificates and floor in the awards section are each drawn on their own WebGL canvas.

Opening the portfolio for the first time means downloading about 3.1 MB, rising to 3.9 MB after scrolling the whole page. The largest single file is the animated flame used in the loading animation and along the edges of the page, a 949 KB GIF. GIF is a very old animation format, and the same footage saved as video would usually take only a fraction of the size. The two 3D models are sizeable too, with 846 KB for the sigil and 526 KB for the awards floor.

The site's server responds very unevenly, returning the first byte in as little as 0.19 seconds and as much as 3.4 seconds, far beyond Google's recommended 0.8 seconds. The first content (FCP) and the largest content (LCP) are both the portrait on the first screen. Its arrival swings along with the server, from 0.62 seconds at best to nearly 4 seconds at worst, against Google's recommendations of 1.8 and 2.5 seconds. Almost nothing moves out of place during loading, with a layout shift score (CLS) of only 0.002. Loading includes 4 to 7 long tasks, stretches when a script keeps the browser too busy to respond to input, and the longest lasts 327 milliseconds.

Once the page is running, most of the load on the graphics card comes from the number of surfaces in the models. The 3D scenes send only 7 to 9 draw calls to the graphics card per frame, but they contain up to about 270,000 triangles, mostly in the sigil and the awards floor. Both canvases cap their pixel density at 1.6 times the screen's, which cuts down the number of pixels to draw.

Keyboard-only visitors and people bothered by motion both run into trouble on this site. When keyboard users start pressing Tab from the top of the page, the first four presses land in an invisible contact form. The form normally has zero height, so visitors cannot see it, yet the keyboard can still reach its name, phone, email and message fields. The fifth press lands on the form's submit button, which sits off screen. Only after that does the focus return to the navigation, and the focus outline on the navigation links is a 1-pixel near-black line that is almost impossible to see against black and red. Operating systems offer a reduced motion setting for people who feel unwell when things move on screen, but the stylesheet has no rules for it, so the sigil and the section animations play regardless of the setting.

Meer Mohsin's site scored 7.26 out of 10 for its Awwwards Site of the Day. Of the four categories, Creativity was highest at 7.75, Design at 7.28 and Content at 7.19 sat in the middle, and Usability was lowest at 6.94. The nineteen jurors' overall scores ranged widely from 6.0 to 9.0, with three votes above 8.

The site received 7.20 from the Awwwards developer jury, a separate panel that judges the technical build. Among the developer categories, Animations was highest at 8.00 and Accessibility lowest at 6.60, which matches the problems of keyboard users getting lost and animations that cannot be switched off. Semantics scored 7.20, WPO (web performance optimisation) 7.40 and Markup, meaning how the page's code is written, 6.80.

The site is credited to Meer Mohsin alone for both design and development. His Awwwards profile says he is from Pakistan and has submitted only this one project, and the one Honorable Mention it records is the Honors certificate from 19 August shown on his site. On the first screen he describes himself as a visual storyteller, interface designer and 3D web developer, and the description of CODENARTS in the work section also says he designed and developed that project.