Currently design engineering at DSI. Previously creative technology at Love and Money.
Currently design engineering at DSI. Previously creative technology at Love and Money.
Currently design engineering at DSI. Previously creative technology at Love and Money.
Shristi is a designer building interfaces and identities rooted in purpose, participation, and play.
Her work is a blend of visual, written, && programming languages that transform brand inputs into bespoke outputs.
Shristi is a designer building interfaces and identities rooted in purpose, participation, and play.
Her work is a blend of visual, written, && programming languages that transform brand inputs into bespoke outputs.
super-embed:
<head>
<link rel="preconnect" href="<https://fonts.googleapis.com>">
<link rel="preconnect" href="<https://fonts.gstatic.com>" crossorigin>
<link href="<https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap>" rel="stylesheet">
<link href="<https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap>" rel="stylesheet">
</head>
<section class="images-hover">
<div>
<div class="intro"><h1> Shristi is a designer building interfaces and identities rooted in purpose, participation, and play. </h1> </div><br>
<div class="intro"><h1 style="margin-top: 0px"> Her work is a blend of visual, written, && programming languages that transform brand inputs into bespoke outputs. </h1></div><br>
<div class="subline"> <p> Currently design engineering at <a href="<https://designsystems.international/>" class="landing-link">DSI</a>. Previously creative technology at<a href="<https://loveandmoney.com/>"> Love and Money. </a> <a href="mailto:[email protected]" class="landing-link">Get in touch</a> to collaborate.</p></div>
</div>
<div class="outro"> <strong> ↓ ↓ ↓ </strong></div>
<img class="image" data-index="self-portrait" data-status="inactive" src="<https://imgur.com/MiCUAk9.gif>"/>
<img class="image" data-index="FAFSA-game" data-status="inactive" src="<https://i.imgur.com/uXft7Cn.gif>"/>
<img class="image" data-index="ikai-asai" data-status="inactive" src="<https://i.imgur.com/gYZIrhj.jpg>" />
<img class="image" data-index="arduino-packaging" data-status="inactive" src="<https://i.imgur.com/LMvnvLx.jpg>" />
<img class="image" data-index="how-are-you" data-status="inactive" src="<https://i.imgur.com/02FyEEV.gif>" />
<img class="image" data-index="arduino-packaging" data-status="inactive" src="<https://i.imgur.com/oPrFDjQ.png>" />
<img class="image" data-index="arduino-generator" data-status="inactive" src="<https://i.imgur.com/eG1nB5Z.gif>" />
<img class="image" data-index="astronomy-website" data-status="inactive" src="<https://i.imgur.com/dL38IP2.png>" />
<img class="image" data-index="1289-pages" data-status="inactive" src="<https://i.imgur.com/T3wDRPP.gif>" />
<img class="image" data-index="i-wont-forget" data-status="inactive" src="<https://i.imgur.com/Y6NGfDW.jpeg>" />
<img class="image" data-index="exhibiting-iPad" data-status="inactive" src="<https://i.imgur.com/qqWI1CK.jpeg>" />
<img class="image" data-index="face-generator" data-status="inactive" src="<https://i.imgur.com/BvsS5Kv.gif>" />
<img class="image" data-index="comedy-music" data-status="inactive" src="<https://i.imgur.com/cPKvat3.jpg>" />
<img class="image" data-index="diff-hero" data-status="inactive" src="<https://i.imgur.com/VYSlVGo.jpg>" />
<img class="image" data-index="exhibiting-screen" data-status="inactive" src="<https://i.imgur.com/kbTD59Z.jpeg>" />
<img class="image" data-index="nasa-jpl" data-status="inactive" src="<https://i.imgur.com/WmwJ52N.jpg>" />
<img class="image" data-index="bling-bling" data-status="inactive" loop src="<https://i.imgur.com/dHIBq1Y.gif>" />
<img class="image" data-index="1289-phone" data-status="inactive" src="<https://i.imgur.com/newG2dV.jpeg>" />
<img class="image" data-index="craft-collect" data-status="inactive" src="<https://i.imgur.com/ncYAFhi.jpeg>" />
<img class="image" data-index="post-card-generator" data-status="inactive" src="<https://i.imgur.com/9ynnBhp.gif>" />
<img class="image" data-index="type-thursday" data-status="inactive" src="<https://i.imgur.com/f7v4RTu.jpg>" />
<img class="image" data-index="H-3D" data-status="inactive" src="<https://i.imgur.com/DzQpoxi.png>" />
<img class="image" data-index="ikai-asai" data-status="inactive" src="<https://i.imgur.com/eFJBkTk.jpg>" />
<img class="image" data-index="album-art" data-status="inactive" src="<https://i.imgur.com/JCWsruT.jpg>" />
<img class="image" data-index="entropy-posters" data-status="inactive" src="<https://i.imgur.com/AI7qb1P.jpg>" />
<img class="image" data-index="diff-standee" data-status="inactive" src="<https://i.imgur.com/GLTVLA2.jpg>" />
<img class="image" data-index="cc-fest" data-status="inactive" src="<https://i.imgur.com/sd6VqJZ.png>" />
</section>
<style>
a {
text-decoration: none;
color: #9571ff;
}
.landing-link:hover{
opacity: 0.8;
}
@media only screen and (min-width: 600px){
.images-hover{
background-color: none;
min-height: 95vh;
width: 100%;
top:0px;
left:0px;
}
.image {
width: 30vmin;
position: absolute;
transform: translate(-50%, -50%);
z-index: -10;
}
.image[data-status="inactive"] {
display: none;
}
.image[data-status="active"] {
display: block;
}
.intro{
width: 100%;
color: inherit;
z-index: 1000;
}
.subline{
width: 100%;
z-index: 10;
}
.outro{
position: absolute;
transform: translate(-50%, -50%);
text-align: center;
top: 85vh;
color: #9571ff;
scale: 1.5;
animation: scroll 1s ease-in alternate infinite;
}
h1{
font-family: "Libre Baskerville", serif;
font-weight: 400;
font-style: normal;
line-height: 150%;
text-align: left;
font-size: calc(1.25rem*1.875);
margin: 1rem 0rem;
}
.libre-baskerville-regular-italic {
font-family: "Libre Baskerville", serif;
font-weight: 400;
font-style: italic;
font-size: calc(1.26rem*1.875);
}
@keyframes scroll {
0% {
transform: translateY(-15px);
}
100% {
transform: translateY(15px);
}
}
}
@media only screen and (max-width: 599px) {
h1{
font-family: "Libre Baskerville", serif;
font-weight: 400;
font-style: normal;
line-height: 140%;
text-align: left;
font-size: calc(1.5rem*1.5);
}
.outro{
opacity: 0;
}
.image {
width: 0vw;
height: 0vw;
padding: 0px;
margin: 0px;
opacity: 0;
border-radius: 20px;
}
}
</style>
<script>
const images = document.getElementsByClassName("image");
let globalIndex = 0,
last = { x: 0, y: 0 };
const activate = (image, x, y) => {
image.style.left = `${x-200}px`;
image.style.top = `${y}px`;
image.style.zIndex = globalIndex;
image.dataset.status = "active";
last = { x, y };
}
const distanceFromLast = (x, y) => {
return Math.hypot(x - last.x, y - last.y);
}
const handleOnMove = e => {
if(distanceFromLast(e.clientX, e.clientY) > (window.innerWidth / 8)) {
const lead = images[globalIndex % images.length],
tail = images[(globalIndex - 5) % images.length];
activate(lead, e.clientX, e.clientY);
if(tail) tail.dataset.status = "inactive";
globalIndex++;
}
}
window.onmousemove = e => handleOnMove(e);
window.ontouchmove = e => handleOnMove(e.touches[0]);
</script>
Select Work