隆重推出 Studio:我们精美的新机构网站模板

Adam Wathan

我们刚刚发布了 Studio — 一个我们为 Tailwind UI 在过去几个月里一直在开发的美丽的新机构网站模板。

Learn about the Studio template

我们使用 Next.js、MDX,当然还有 Tailwind CSS 构建了它,并且它是我们发布的第一个使用新的 Next.js App Router 的模板。

设计一个机构模板是一个有趣的项目,因为创意机构通常使用他们自己的网站来展示一些非常炫酷、定制的想法,而当目标是展示您公司能够做什么时,使用模板会让人感觉很奇怪。

因此,我们尝试以两个目标来处理这个问题,以使其对人们真正有用

  1. 教人们如何实现你在炫酷机构网站上看到的一些炫酷效果 — 我一直认为我们的模板不仅仅是简单的模板,更是一种宝贵的教育资源,因此我们希望利用此模板来展示我们如何构建你在这些网站上看到的许多炫酷的互动和动画细节。
  2. 为不销售设计的机构设计 — 有很多机构只专注于工程工作,而且很多时候这些公司很难在设计方面脱颖而出。我们尝试以一种不依赖大量设计作品截图和其他内容就能看起来很棒的方式来设计这个模板,以便专注于代码的机构可以将其用作自己网站的起点。

我认为我们最终的设计达到了这两个目标,我为最终的成果感到非常自豪。

像往常一样查看 实时预览 以获得完整体验 — 其中有很多很酷的细节,您必须在浏览器中亲眼看到才能真正欣赏。


令人愉悦的动画效果

机构网站不成文的规则之一是它们必须很炫酷。我们没有完全做到替换鼠标光标或使用 WebGL 渲染整个网站,但我们确实在可以的地方寻找机会来巧妙地引入动画和互动性。

例如,我们围绕 Framer Motion 的一些功能构建了一个轻量级的声明式组件 API,以便轻松实现滚动触发的进入动画

这些类型的动画的创作体验非常棒 — 只需使用 FadeInFadeInStagger 组件包裹您想要淡入的内容,即可开始使用

function Clients() {
return (
<div className="mt-24 rounded-4xl bg-neutral-950 py-20 sm:mt-32 sm:py-32 lg:mt-56">
<Container>
<FadeIn className="flex items-center gap-x-8">
<h2 className="font-display text-center text-sm font-semibold tracking-wider text-white sm:text-left">
We’ve worked with hundreds of amazing people
</h2>
<div className="h-px flex-auto bg-neutral-800" />
</FadeIn>
<FadeInStagger faster>
<ul role="list" className="mt-10 grid grid-cols-2 gap-x-8 gap-y-10 lg:grid-cols-4">
{clients.map(([client, logo]) => (
<li key={client}>
<FadeIn>
<Image src={logo} alt={client} unoptimized />
</FadeIn>
</li>
))}
</ul>
</FadeInStagger>
</Container>
</div>
);
}

我们还在徽标中添加了这个漂亮的小动画,其中标记在悬停时填充为纯色

这个小细节看起来很小,但有趣的是,如果没有客户端导航,您就无法真正实现它,因为当单击徽标返回主页时,动画会重新运行。使用像 Next.js 这样的框架,我们能够在悬停时保持徽标填充,即使在 URL 更改时也是如此,这感觉好多了。

菜单抽屉动画的效果也非常好,在打开时将整个页面向下推

如果您仔细观察,徽标和按钮也不只是简单地更改颜色 — 它实际上是由向下滑动的 sheet 的位置精确驱动的,并且当 sheet 的边缘与其相交时,徽标实际上同时部分为白色和部分为黑色。

我真正喜欢的另一个细节是我们为案例研究页面上的图像设计的这种交互效果

我们希望整个网站感觉是黑白的,但一直显示黑白图像感觉不太对。因此,我们设计了这种处理方式,图像最初是黑白的,并且当图像在滚动时接近屏幕中心时,饱和度会动画返回。我们还在悬停时显示全彩色图像。

我们还小心地尝试以一种考虑到患有前庭运动障碍且对这些类型的大的动画敏感的人们的方式来实现所有这些动画。使用 Framer Motion 的 useReducedMotion 钩子和 Tailwind 中的 motion-safe 变体,我们执行诸如有条件地禁用导航菜单动画之类的操作,并将滚动驱动的进入动画限制为仅不透明度,这样屏幕上的内容就不会移动。


以开发者为中心的案例研究和博客工作流程

Studio 包括对 案例研究博客文章 的支持,并且正如您可能已经猜到的那样,如果您玩过我们的任何其他模板,我们以此为借口将 MDX 集成到项目中。

这是一个基本案例研究的示例 — 主要以 markdown 编写,其中包含一些常见的元数据,并支持混合在内容中的自定义组件

import logo from "@/images/clients/phobia/logomark-dark.svg";
import imageHero from "./hero.jpg";
import imageJennyWilson from "./jenny-wilson.jpeg";
export const caseStudy = {
client: "Phobia",
title: "Overcome your fears, find your match",
description:
"Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.",
summary: [
"Find love in the face of fear — Phobia is a dating app that matches users based on their mutual phobias so they can be scared together.",
"We worked with Phobia to develop a new onboarding flow. A user is shown pictures of common phobias and we use the microphone to detect which ones make them scream, feeding the results into the matching algorithm.",
],
logo,
image: { src: imageHero },
date: "2022-06",
service: "App development",
testimonial: {
author: { name: "Jenny Wilson", role: "CPO of Phobia" },
content:
"The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone without triggering one of those annoying permission dialogs.",
},
};
export const metadata = {
title: `${caseStudy.client} Case Study`,
description: caseStudy.description,
};
## Overview
Noticing incredibly high churn, the team at Phobia came to the conclusion that, instead of having a
fundamentally flawed business idea, they needed to improve their onboarding process.
Previously users selected their phobias manually but this led to some users selecting things they
weren’t actually afraid of to increase their matches.
To combat this, we developed a system that displays a slideshow of common phobias during
onboarding. We then use malware to surreptitiously access their microphone and detect when they
have audible reactions. We measure the pitch, volume and duration of their screams and feed that
information to the matching algorithm.
The next phase is a VR version of the onboarding flow where users are subjected to a series of
scenarios that will determine their fears. We are currently developing the first scenario, working
title: “Jumping out of a plane full of spiders”.
## What we did
<TagList>
<TagListItem>Android</TagListItem>
<TagListItem>iOS</TagListItem>
<TagListItem>Malware</TagListItem>
<TagListItem>VR</TagListItem>
</TagList>
<Blockquote author={{ name: "Jenny Wilson", role: "CPO of Phobia" }} image={{ src: imageJennyWilson }}>
The team at Studio went above and beyond with our onboarding, even finding a way to access the user’s microphone
without triggering one of those annoying permission dialogs.
</Blockquote>
<StatList>
<StatListItem value="20%" label="Churn rate" />
<StatListItem value="5x" label="Uninstalls" />
<StatListItem value="2.3" label="App store rating" />
<StatListItem value="8" label="Pending lawsuits" />
</StatList>

此模板的所有排版样式都是完全自定义的,并且这次我们采取了与过去略有不同的方法 — 我们没有编写大量复杂的 CSS 来避免我们的排版样式与 MDX 中的任何自定义组件冲突,而是创建了一个名为 remark-rehype-wrap 的小型 remark 插件,该插件可以使您可以使用包装器元素包装 Markdown 内容块。

这样,我们可以使用 typography 类包装任何纯 Markdown 内容,但确保文档中的任何自定义组件都只是被包装,而不是尝试以忽略树的这些部分的方式来制作 CSS。

两种方法都完全可行,但尝试新想法并看看您学到什么总是很有趣的。我也很好奇看看未来基于 CSS 的新 样式查询 功能的解决方案会是什么样子!


这就是 Studio!下载它,拆解它,看看您是否能学到一些新技巧。

与我们所有的模板一样,它包含在一次性购买的 Tailwind UI 全套访问 许可证中,这是支持我们在 Tailwind CSS 上的工作的最佳方式,并使我们能够继续在未来几年构建出色的东西。

将我们所有的更新直接发送到您的收件箱。
注册我们的新闻通讯。

版权所有 © 2025 Tailwind Labs Inc.·商标政策