feat: warped grid

[svvimming]

Here is a first version of the warped grid component which uses a basic svg grid and applies a warp to it to match the current image on the live site. The warp is applied directly to the svg elements using warpjs.

@orvn I still need to add the animation on entry, was wondering if you had any thoughts on what it should look like/animation speed, duration, etc. Currently only the grid on the index (apply page) is using the new component so you can navigate to another page to compare with the older warped grid there.

UPDATE: March 31st 2023

The warp js implementation using SVGs in the dom has been replaced with a canvas implementation. More info to come on editing animation parameters by adding props to the WarpedGrid component.

UPDATE: April 4th 2023

The following props can be passed to the warped grid component to customize animation:

animation-active - boolean indicating the play state of the animation (true = running, false = paused)
vertical-lines - the number of vertical lines in the grid
horizontal-lines - the number of horizontal lines in the grid
cell-width - the width/height of a grid cell in pixels
line-width - grid line width in pixels
resolution - the number of sublines used to create each side of each cell
pulse-speed - how fast the pulse should oscillate (nb: this should be well under 1.0. Using integer values will appear to pause the pulse but this is because the step size is too large for the underlying sin/cos calculation and will cause them to jump straight to function zeros)
pulse-intensity - how strong the pulse animation component is
interaction-springing - a coefficient determining how bouncy the bulge should behave when agitated by the mouse
interaction-damping - a coefficient determining how stiff the bulge should behave when agitated by the mouse (nb: values of 1.0 are equivalent to no damping, values above 1.0 produce an amplification effect and the animation will diverge)
interaction-intensity - how strong the interaction component is
grid-color - a string determining the color of the lines

** all props are of type Number unless otherwise stated

UPDATE: April 27th 2023

The warped grids have been added to each instance across the site pages and adjusted in each location to ensure proper display. The only exception is on the notaries page which is very long and was performing poorly with several canvas filling the height of the page. The original image has been used in on this page instead.