Requirements

Header

Hero Section

Screenshot

• Animate in text/characters

• ASCII logomark should animate out with the rocket by the text randomizing and building it while it launches from the bottom right of where the D is and move to its final position. While the rocket is moving, the blast animates out (randomized characters coming in and then finishing on the characters what we have in the design) and then around the bottom and left side circling around to the tip of the rocket area.

• The scroll line animates on a loop and is clickable to scroll down.

• The text has a highlight text that appear red.

• The eye image is a background image or video. A lightbox video can optionally be attached to it.

Transition to the next section

• Can set the transition background color based on the block below the hero. In this case, it’s the Featured Work block which is white, so you’d set the hero transition color to white.

• Animation:

  • When scrolling down, the hero contents don’t move (Can be done with GSAP ScrollTrigger’s pin)

  • Have a cover div wrapper, it should be full viewport with two 50% width divs with the backgrounds set to the hero transition color. These should stagger translate up from the bottom of the viewport when scrolling.

• ASCII logomark should animate out with the rocket by the text randomizing and building it while it launches from the bottom right of where the D is and move to its final position. While the rocket is moving, the blast animates out (randomized characters coming in and then finishing on the characters what we have in the design) and then around the bottom and left side circling around to the tip of the rocket area.

Screenshot

• The section title should be centered according to the screen height (om PC, devices and tablets)

Work section

Screenshot

• Text in top bar is on a looping marquee.

• By default, there is no media (image/video). When hovering a work item, that item’s media then appears and is attached to the to cursor movement but pinned right.

• The cursor changes to a View icon

Services section

Screenshot

• Rocket Headline Shift
  Above is the stating position. While the user scrolls, the contents should translate left until the right rocket is in view and the left is half off screen.

When scrolled to, the red frame animates in following each inner piece animating in.

• Top left text is a looping marquee

• ASCII text in the top right is a bunch of ASCII text that types out and moves up like a terminal. This is a loop.

• Top left pane of the ASCII man should be a video that uses some frontend magic to render text characters based on the video. Alternatively, this can also be just a normal media component (image/video).

• The pane with “Websites & Digital Products” and text bellow:

  • This is connected to the round numbered navigatIon right above it.

  • The title is a mask and each section can have a media item. This media item will appear in the masked title on hover and follow the mouse.

    • A secondary circle is in front of the text giving a subtle circle outline. Both this circle and the media circle in the mask should be aligned with each other and with the mouse positioning.

• The entire HUD is designed to fit in the viewport. On some smaller screens, some panes can be hidden.

• The HUD should be pinned to the viewport. As you scroll, the sections (e.g. Websites & Digital Products) change. Clicking the numbered navigation changes the section as well; it scrolls the browser to that section, animating it in.

Brand slider

Screenshot

• ed background with the rocket starts as a circle and then animates in when scrolled to.

  • Background goes from a circle to the width of the available space while the rocket translating right. The final position is how the design is.

• Logos are a marquee

Accordeon

Screenshot

• Cursor changes to the + when hovering an unopened item.

• Cursor changes to the – when hovering an opened item’s title.

• Animating in each section should be a smooth transition.

  • The right vents should stagger load in when an item is opened. Similar on closing an item.

Call to action

Screenshot

• Rocket is animated

  • Shoots up when scrolled to

  • Hovering slightly on repeat

  • Blast animated (opacity changes, text constantly changin)

• Matrix raining code like in the loader

• Dots are a mask to the media (picture/video)

Footer

Screenshot

• Only the Home page in the designs is using the final footer. The notable difference includes the address.

Top section

https://prnt.sc/d-nnMG-BuKBX

• Need to be made and adapted according to the design

Projects section

https://prnt.sc/RZvpHstCr4n-

• Need to be made and adapted according to the design