Skip to content
Salt Website Project
Salt Website Project
Project Summary
Tasks
Output
More
Share
Explore

icon picker
Project Summary

Idea, Scope of Work, Time & Budget
AM
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.

Other Expectations

Code Readability + Maintainability
Unit Tests wherever possible
Optimized expereice.

Time

15 hours spanned across 4 days.

February 2021

Month
Today
Sunday
Monday
Tuesday
Wednesday
Thursday
Friday
Saturday
31
01
02
03
04
05
06
Project Duration
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
01
02
03
04
05
06
⁠

Budget

20k - 25k INR

Resources

Desktop Design:
⁠
https://www.figma.com/file/rG7ladTrQ2F58kdVklChWo/Untitled?node-id=0%3A1
⁠
⁠
Phone Design:
⁠
https://www.figma.com/file/XPker6IachltXznxitEFh9/Untitled?node-id=0%3A1
⁠
⁠
Idea
Scope of Work
Other Expectations
Time
Budget
Resources
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.