About this video
A quick look at the site we built for Graft Studio. Roboto Studio | The Sanity, Vercel & Next.js experts | Building the best editorial experience you've ever seen with top tier performance to boot 🔥
Book a meeting ↓
https://robotostudio.com/call?ref=you...
Socials ↓
https://robotostudio.com/
https://x.com/studioroboto
/ 11290247
Full transcript
YouTube captions (auto_generated; en)
hey how's it going thanks for jumping in
hey how's it going thanks for jumping in
this case study this is graph studio so
this case study this is graph studio so
this case study this is graph studio so
um what you see when you first load up
um what you see when you first load up
um what you see when you first load up
the website is this m video at the very
the website is this m video at the very
the website is this m video at the very
top of the screen um it's got this
top of the screen um it's got this
top of the screen um it's got this
really cool placeholder kind of blur up
really cool placeholder kind of blur up
really cool placeholder kind of blur up
effect so if I refresh the page you'll
effect so if I refresh the page you'll
effect so if I refresh the page you'll
see that uh you get this blur up you get
see that uh you get this blur up you get
see that uh you get this blur up you get
these nice CSS animations uh very simple
these nice CSS animations uh very simple
these nice CSS animations uh very simple
but very very effective um you go down
but very very effective um you go down
but very very effective um you go down
the page a little bit this is actually
the page a little bit this is actually
the page a little bit this is actually
where the rest of the pages in the rest
where the rest of the pages in the rest
where the rest of the pages in the rest
of the page is a page builder so every
of the page is a page builder so every
of the page is a page builder so every
single item that you see on screen
single item that you see on screen
single item that you see on screen
pretty much throughout the entire
pretty much throughout the entire
pretty much throughout the entire
website um is hot swappable tweakable um
website um is hot swappable tweakable um
website um is hot swappable tweakable um
and has a live preview to show you in
and has a live preview to show you in
and has a live preview to show you in
real time what the changes you are
real time what the changes you are
real time what the changes you are
making uh look like essentially um so
making uh look like essentially um so
making uh look like essentially um so
yeah your little eyebrow text a bit of
yeah your little eyebrow text a bit of
yeah your little eyebrow text a bit of
title um and again the case studies
title um and again the case studies
title um and again the case studies
these are all powered by a document type
these are all powered by a document type
these are all powered by a document type
a case study document type uh again muks
a case study document type uh again muks
a case study document type uh again muks
video inside of here um the best
video inside of here um the best
video inside of here um the best
possible video player when it comes to a
possible video player when it comes to a
possible video player when it comes to a
website in my opinion um and again all
website in my opinion um and again all
website in my opinion um and again all
these different bits and pieces some
these different bits and pieces some
these different bits and pieces some
really impressive featured clients so if
really impressive featured clients so if
really impressive featured clients so if
you're looking into um building a
you're looking into um building a
you're looking into um building a
Shopify website these guys are
Shopify website these guys are
Shopify website these guys are
incredible um but let's go through to
incredible um but let's go through to
incredible um but let's go through to
the
the
the
services so Services um essentially this
services so Services um essentially this
services so Services um essentially this
page again is a page builder uh we have
page again is a page builder uh we have
page again is a page builder uh we have
these icons that are in here so they
these icons that are in here so they
these icons that are in here so they
could either be an uploaded image or an
could either be an uploaded image or an
could either be an uploaded image or an
icon picker uh again you can tweak any
icon picker uh again you can tweak any
icon picker uh again you can tweak any
of the text inside of here um these
of the text inside of here um these
of the text inside of here um these
images are using the sanity hotspot so
images are using the sanity hotspot so
images are using the sanity hotspot so
um when you actually upload the image
um when you actually upload the image
um when you actually upload the image
you can put a little circle around the
you can put a little circle around the
you can put a little circle around the
bits that you want to stay in Focus so
bits that you want to stay in Focus so
bits that you want to stay in Focus so
in this case um it's it's the knife with
in this case um it's it's the knife with
in this case um it's it's the knife with
the Tomato um depending on the screen
the Tomato um depending on the screen
the Tomato um depending on the screen
size this should always stay in Focus uh
size this should always stay in Focus uh
size this should always stay in Focus uh
which is really cool um you can tweak
which is really cool um you can tweak
which is really cool um you can tweak
this and play around with this on
this and play around with this on
this and play around with this on
different sections of the website so
different sections of the website so
different sections of the website so
whenever you get like a traditional blog
whenever you get like a traditional blog
whenever you get like a traditional blog
post where there's a gigantic image at
post where there's a gigantic image at
post where there's a gigantic image at
the top um it looks really really good
the top um it looks really really good
the top um it looks really really good
on a desktop but then you shrink it down
on a desktop but then you shrink it down
on a desktop but then you shrink it down
to mobile and you might have issues um
to mobile and you might have issues um
to mobile and you might have issues um
you can completely solve this with
you can completely solve this with
you can completely solve this with
sanity image hotspots uh We've basically
sanity image hotspots uh We've basically
sanity image hotspots uh We've basically
done that here um our services again
done that here um our services again
done that here um our services again
this is using the icons uh you can
this is using the icons uh you can
this is using the icons uh you can
either do a custom image or it can be an
either do a custom image or it can be an
either do a custom image or it can be an
icon itself uh we'll go over to the work
icon itself uh we'll go over to the work
icon itself uh we'll go over to the work
page so again these are all case studies
page so again these are all case studies
page so again these are all case studies
that are on the website this is a
that are on the website this is a
that are on the website this is a
specific document inside of these
specific document inside of these
specific document inside of these
documents um they uh they basically they
documents um they uh they basically they
documents um they uh they basically they
click through at the minute but there is
click through at the minute but there is
click through at the minute but there is
a lot more cool stuff that's coming um
a lot more cool stuff that's coming um
a lot more cool stuff that's coming um
but essentially they have a nice little
but essentially they have a nice little
but essentially they have a nice little
chem Burns effect when you hover over um
chem Burns effect when you hover over um
chem Burns effect when you hover over um
Outpost is the blog so the blog has some
Outpost is the blog so the blog has some
Outpost is the blog so the blog has some
nice uh filters as well so these filters
nice uh filters as well so these filters
nice uh filters as well so these filters
uh are a document type so you could have
uh are a document type so you could have
uh are a document type so you could have
uh strategy industry but it could keep
uh strategy industry but it could keep
uh strategy industry but it could keep
going you could add as many filters as
going you could add as many filters as
going you could add as many filters as
you want you won't need a developer
you want you won't need a developer
you want you won't need a developer
they'll just keep spanning across that
they'll just keep spanning across that
they'll just keep spanning across that
section um and they'll just keep adding
section um and they'll just keep adding
section um and they'll just keep adding
uh which is pretty cool each one of
uh which is pretty cool each one of
uh which is pretty cool each one of
these has a portable text the portable
these has a portable text the portable
these has a portable text the portable
text has a whole host of different
text has a whole host of different
text has a whole host of different
things you've got images you've got
things you've got images you've got
things you've got images you've got
bolds italics uh headings heading one to
bolds italics uh headings heading one to
bolds italics uh headings heading one to
heading one to sixes um and all this
heading one to sixes um and all this
heading one to sixes um and all this
kind of fancy stuff it's using Tailwinds
kind of fancy stuff it's using Tailwinds
kind of fancy stuff it's using Tailwinds
typography package so it should look
typography package so it should look
typography package so it should look
visually pleasing with the right gaps
visually pleasing with the right gaps
visually pleasing with the right gaps
and everything on all the different
and everything on all the different
and everything on all the different
screen sizes um and then finally we have
screen sizes um and then finally we have
screen sizes um and then finally we have
the contact form and let me give you the
the contact form and let me give you the
the contact form and let me give you the
best tip of the day form spark for
best tip of the day form spark for
best tip of the day form spark for
contact forms if you're looking for a
contact forms if you're looking for a
contact forms if you're looking for a
quick easy solution for it it's
quick easy solution for it it's
quick easy solution for it it's
incredible it's something like 50,000
incredible it's something like 50,000
incredible it's something like 50,000
form submissions for I think it's $25
form submissions for I think it's $25
form submissions for I think it's $25
from memory uh it's really ridiculously
from memory uh it's really ridiculously
from memory uh it's really ridiculously
treat cheap and it's really really
treat cheap and it's really really
treat cheap and it's really really
powerful um so yeah this is the the full
powerful um so yeah this is the the full
powerful um so yeah this is the the full
case study if you like it get in touch
case study if you like it get in touch
case study if you like it get in touch
with us we're building these all the
with us we're building these all the
with us we're building these all the
time we absolutely love this stack so
time we absolutely love this stack so
time we absolutely love this stack so
yeah have a great day and take care
yeah have a great day and take care
yeah have a great day and take care
bye
Read timestamped source captions
0:02hey how's it going thanks for jumping in
0:02hey how's it going thanks for jumping in this case study this is graph studio so
0:05this case study this is graph studio so
0:05this case study this is graph studio so um what you see when you first load up
0:06um what you see when you first load up
0:06um what you see when you first load up the website is this m video at the very
0:08the website is this m video at the very
0:08the website is this m video at the very top of the screen um it's got this
0:10top of the screen um it's got this
0:10top of the screen um it's got this really cool placeholder kind of blur up
0:12really cool placeholder kind of blur up
0:12really cool placeholder kind of blur up effect so if I refresh the page you'll
0:13effect so if I refresh the page you'll
0:14effect so if I refresh the page you'll see that uh you get this blur up you get
0:15see that uh you get this blur up you get
0:15see that uh you get this blur up you get these nice CSS animations uh very simple
0:18these nice CSS animations uh very simple
0:18these nice CSS animations uh very simple but very very effective um you go down
0:21but very very effective um you go down
0:21but very very effective um you go down the page a little bit this is actually
0:22the page a little bit this is actually
0:22the page a little bit this is actually where the rest of the pages in the rest
0:24where the rest of the pages in the rest
0:24where the rest of the pages in the rest of the page is a page builder so every
0:26of the page is a page builder so every
0:26of the page is a page builder so every single item that you see on screen
0:28single item that you see on screen
0:28single item that you see on screen pretty much throughout the entire
0:29pretty much throughout the entire
0:29pretty much throughout the entire website um is hot swappable tweakable um
0:33website um is hot swappable tweakable um
0:33website um is hot swappable tweakable um and has a live preview to show you in
0:34and has a live preview to show you in
0:34and has a live preview to show you in real time what the changes you are
0:36real time what the changes you are
0:36real time what the changes you are making uh look like essentially um so
0:39making uh look like essentially um so
0:39making uh look like essentially um so yeah your little eyebrow text a bit of
0:41yeah your little eyebrow text a bit of
0:41yeah your little eyebrow text a bit of title um and again the case studies
0:43title um and again the case studies
0:43title um and again the case studies these are all powered by a document type
0:45these are all powered by a document type
0:45these are all powered by a document type a case study document type uh again muks
0:47a case study document type uh again muks
0:47a case study document type uh again muks video inside of here um the best
0:50video inside of here um the best
0:50video inside of here um the best possible video player when it comes to a
0:52possible video player when it comes to a
0:52possible video player when it comes to a website in my opinion um and again all
0:55website in my opinion um and again all
0:55website in my opinion um and again all these different bits and pieces some
0:56these different bits and pieces some
0:56these different bits and pieces some really impressive featured clients so if
0:58really impressive featured clients so if
0:58really impressive featured clients so if you're looking into um building a
1:00you're looking into um building a
1:00you're looking into um building a Shopify website these guys are
1:02Shopify website these guys are
1:02Shopify website these guys are incredible um but let's go through to
1:05incredible um but let's go through to
1:05incredible um but let's go through to the
1:06the
1:06the services so Services um essentially this
1:10services so Services um essentially this
1:10services so Services um essentially this page again is a page builder uh we have
1:12page again is a page builder uh we have
1:12page again is a page builder uh we have these icons that are in here so they
1:14these icons that are in here so they
1:14these icons that are in here so they could either be an uploaded image or an
1:15could either be an uploaded image or an
1:15could either be an uploaded image or an icon picker uh again you can tweak any
1:18icon picker uh again you can tweak any
1:18icon picker uh again you can tweak any of the text inside of here um these
1:20of the text inside of here um these
1:20of the text inside of here um these images are using the sanity hotspot so
1:23images are using the sanity hotspot so
1:23images are using the sanity hotspot so um when you actually upload the image
1:25um when you actually upload the image
1:25um when you actually upload the image you can put a little circle around the
1:26you can put a little circle around the
1:26you can put a little circle around the bits that you want to stay in Focus so
1:28bits that you want to stay in Focus so
1:28bits that you want to stay in Focus so in this case um it's it's the knife with
1:30in this case um it's it's the knife with
1:30in this case um it's it's the knife with the Tomato um depending on the screen
1:32the Tomato um depending on the screen
1:33the Tomato um depending on the screen size this should always stay in Focus uh
1:35size this should always stay in Focus uh
1:35size this should always stay in Focus uh which is really cool um you can tweak
1:37which is really cool um you can tweak
1:37which is really cool um you can tweak this and play around with this on
1:39this and play around with this on
1:39this and play around with this on different sections of the website so
1:41different sections of the website so
1:41different sections of the website so whenever you get like a traditional blog
1:42whenever you get like a traditional blog
1:42whenever you get like a traditional blog post where there's a gigantic image at
1:44post where there's a gigantic image at
1:44post where there's a gigantic image at the top um it looks really really good
1:46the top um it looks really really good
1:46the top um it looks really really good on a desktop but then you shrink it down
1:47on a desktop but then you shrink it down
1:47on a desktop but then you shrink it down to mobile and you might have issues um
1:49to mobile and you might have issues um
1:49to mobile and you might have issues um you can completely solve this with
1:51you can completely solve this with
1:51you can completely solve this with sanity image hotspots uh We've basically
1:53sanity image hotspots uh We've basically
1:53sanity image hotspots uh We've basically done that here um our services again
1:56done that here um our services again
1:56done that here um our services again this is using the icons uh you can
1:58this is using the icons uh you can
1:58this is using the icons uh you can either do a custom image or it can be an
2:00either do a custom image or it can be an
2:00either do a custom image or it can be an icon itself uh we'll go over to the work
2:04icon itself uh we'll go over to the work
2:04icon itself uh we'll go over to the work page so again these are all case studies
2:06page so again these are all case studies
2:06page so again these are all case studies that are on the website this is a
2:07that are on the website this is a
2:07that are on the website this is a specific document inside of these
2:09specific document inside of these
2:09specific document inside of these documents um they uh they basically they
2:12documents um they uh they basically they
2:12documents um they uh they basically they click through at the minute but there is
2:13click through at the minute but there is
2:13click through at the minute but there is a lot more cool stuff that's coming um
2:16a lot more cool stuff that's coming um
2:16a lot more cool stuff that's coming um but essentially they have a nice little
2:17but essentially they have a nice little
2:17but essentially they have a nice little chem Burns effect when you hover over um
2:20chem Burns effect when you hover over um
2:20chem Burns effect when you hover over um Outpost is the blog so the blog has some
2:23Outpost is the blog so the blog has some
2:23Outpost is the blog so the blog has some nice uh filters as well so these filters
2:26nice uh filters as well so these filters
2:26nice uh filters as well so these filters uh are a document type so you could have
2:29uh are a document type so you could have
2:29uh are a document type so you could have uh strategy industry but it could keep
2:30uh strategy industry but it could keep
2:31uh strategy industry but it could keep going you could add as many filters as
2:32going you could add as many filters as
2:32going you could add as many filters as you want you won't need a developer
2:34you want you won't need a developer
2:34you want you won't need a developer they'll just keep spanning across that
2:35they'll just keep spanning across that
2:35they'll just keep spanning across that section um and they'll just keep adding
2:37section um and they'll just keep adding
2:37section um and they'll just keep adding uh which is pretty cool each one of
2:39uh which is pretty cool each one of
2:39uh which is pretty cool each one of these has a portable text the portable
2:41these has a portable text the portable
2:41these has a portable text the portable text has a whole host of different
2:43text has a whole host of different
2:43text has a whole host of different things you've got images you've got
2:44things you've got images you've got
2:44things you've got images you've got bolds italics uh headings heading one to
2:47bolds italics uh headings heading one to
2:47bolds italics uh headings heading one to heading one to sixes um and all this
2:50heading one to sixes um and all this
2:50heading one to sixes um and all this kind of fancy stuff it's using Tailwinds
2:52kind of fancy stuff it's using Tailwinds
2:52kind of fancy stuff it's using Tailwinds typography package so it should look
2:54typography package so it should look
2:54typography package so it should look visually pleasing with the right gaps
2:56visually pleasing with the right gaps
2:56visually pleasing with the right gaps and everything on all the different
2:57and everything on all the different
2:57and everything on all the different screen sizes um and then finally we have
3:00screen sizes um and then finally we have
3:00screen sizes um and then finally we have the contact form and let me give you the
3:02the contact form and let me give you the
3:02the contact form and let me give you the best tip of the day form spark for
3:04best tip of the day form spark for
3:04best tip of the day form spark for contact forms if you're looking for a
3:06contact forms if you're looking for a
3:06contact forms if you're looking for a quick easy solution for it it's
3:08quick easy solution for it it's
3:08quick easy solution for it it's incredible it's something like 50,000
3:10incredible it's something like 50,000
3:10incredible it's something like 50,000 form submissions for I think it's $25
3:13form submissions for I think it's $25
3:13form submissions for I think it's $25 from memory uh it's really ridiculously
3:15from memory uh it's really ridiculously
3:15from memory uh it's really ridiculously treat cheap and it's really really
3:17treat cheap and it's really really
3:17treat cheap and it's really really powerful um so yeah this is the the full
3:19powerful um so yeah this is the the full
3:19powerful um so yeah this is the the full case study if you like it get in touch
3:21case study if you like it get in touch
3:21case study if you like it get in touch with us we're building these all the
3:23with us we're building these all the
3:23with us we're building these all the time we absolutely love this stack so
3:25time we absolutely love this stack so
3:25time we absolutely love this stack so yeah have a great day and take care
3:28yeah have a great day and take care
3:28yeah have a great day and take care bye
Scope and context
- Transcript speakers have not been individually verified.