Project Summary

Idea, Scope of Work, Time & Budget

Anshul Mittal

Idea

Interactive Website with floating crystals which reflect a change of page when slotted into the logo.

Scope of Work

Landing Page:

2 sec loading screen with logo gif (only crystal)

The 7 crystals start floating from their own (pre-defined) start positions

Each crystal’s movement is limited to the screen boundaries.

Interactions amongst those crystals: They bounce off of one another.

Floating speed of crystals should be parameterized in code.

Crystals should not interact with the existing logo, arrow, text etc. It should merely pass through it.

The initial landing page should have no other components below the fold for the initial lock-in period till the user has not interacted with the crystals.

If the user does not interact with the crystals till a predefined time (10s, for example), we add a nudge to indicate that the crystal needs to be placed at the logo.

If the user does not interact further (20s, for example), the “down” arrow appears, and the content below the fold is reachable on scroll.

-- User Interaction Follows --

The nudge involves:

The opacity for the hero crystal starts fluctuating.

Once someone clicks on a crystal, we show a dotted outline of the hero crystal where the crystal drop-zone is (b/w “s” and “l” of the logo).

The drop-zone has a padded “snap” area. Dropping the crystal anywhere in this area snaps the crystal to place.

While a crystal is being moved around, regardless of whether it is placed in the drop-zone or not, the other crystals fade out and slow down, almost like bullet-time.

Once the crystal is placed in the drop-zone or released anywhere else, the other crystals come back to their original opacity, have a momentary speed up, and then resume motion in their original pace.

-- Page Change Follows --

Once the first crystal is placed, the designated content of that crystal should appear/ fade in.

Once the user selects a second crystal, the first crystal disappears from the logo - hinting the user to place the second crystal in its place.

Once the second crystal is placed, the first crystal appears randomly elsewhere with 50% opacity and continues floating around.

This process is repeated for all crystals.

After the second drop-in, regardless of the time elapsed, the “down” arrow appears permanently on the page, allowing the user to scroll to the other pages.

Conceptualisation for the other pages is still a WIP. Broadly there will be 2 pages

a) About Page, and b) Team Page

Notes:

The experience should be similar on all device form factors (laptop, tablet, mobile).

In case of screen space constraints or usability issues, we can resort to a slight modification of the interaction for smaller screens. (eg. click to snap, instead of drag and drop)

The logo and crystals will have both dark and light versions and based on the background we will have to toggle b/w one or the other.