06크레용 말풍선 후기
후기는 윤곽선이 울퉁불퉁한 손그림 말풍선에 담기고, 꼬리도 완벽한 삼각형이 아니라 삐뚠 선 두 개로 그립니다. 옆의 별점은 크레용으로 색칠하다 만 듯 채워지는 정도가 별마다 다릅니다.
쓰임고객 후기, 학부모·수강생 리뷰
울퉁불퉁 테두리부분 채움 별점radius 16
<main class="stage">
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<filter id="rough6" x="-30%" y="-30%" width="160%" height="160%">
<feTurbulence type="fractalNoise" baseFrequency="0.045 0.06" numOctaves="2" seed="33" result="n"/>
<feDisplacementMap in="SourceGraphic" in2="n" scale="6" xChannelSelector="R" yChannelSelector="G"/>
</filter>
</svg>
<figure class="testicrayon">
<span class="testicrayon__avatar" aria-hidden="true"></span>
<div class="testicrayon__bubble">
<svg class="testicrayon__frame" viewBox="0 0 260 110" preserveAspectRatio="none" aria-hidden="true">
<path class="testicrayon__frame-path" d="M18 10 L242 10 C 250 10 252 18 252 26 L252 78 C 252 88 248 96 238 96 L48 96 L30 110 L34 94 L18 92 C 10 90 8 82 8 74 L8 26 C 8 16 10 10 18 10 Z" />
</svg>
<blockquote class="testicrayon__quote">우리 반 홈페이지 같아요</blockquote>
<div class="testicrayon__stars" aria-hidden="true">
<span class="testicrayon__star" aria-hidden="true" style="--fill:100%">★</span>
<span class="testicrayon__star" aria-hidden="true" style="--fill:100%">★</span>
<span class="testicrayon__star" aria-hidden="true" style="--fill:100%">★</span>
<span class="testicrayon__star" aria-hidden="true" style="--fill:80%">★</span>
<span class="testicrayon__star" aria-hidden="true" style="--fill:40%">★</span>
</div>
<figcaption class="testicrayon__caption">김도담 · 미술학원 원장</figcaption>
</div>
</figure>
</main>@use "../../../../site/static/demo-tokens" as *;
$duration: $dur-loop; // 말풍선이 한 번 눌렸다 펴지는 주기
$easing: $ease-spring; // 눌림 곡선
$color: $stage-ink; // 글자 색 기본값(토큰) — 아래 크레용 잉크로 덮는다
$crayon-paper: #fff8ef;
$crayon-ink: #33261c;
$crayon-red: #dbb6b7;
$crayon-yellow: #d1c5a2;
$crayon-blue: #9cb8ce;
$crayon-green: #6dbe6d;
$crayon-purple: #cbbfe0;
@include stage($crayon-paper);
.testicrayon {
margin: 0;
display: flex;
align-items: flex-start;
gap: $sp-3;
width: clamp(230px, 84vw, 340px);
}
.testicrayon__avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: repeating-conic-gradient($crayon-blue 0deg 60deg, $crayon-green 60deg 120deg);
border: 2px solid $crayon-paper;
box-shadow: 0 0 0 2px $crayon-ink;
}
.testicrayon__bubble {
position: relative;
flex: 1;
padding: $sp-4 $sp-4 $sp-3;
animation: bubbleSquish $duration $easing infinite;
}
.testicrayon__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
filter: url(#rough6);
}
.testicrayon__frame-path {
fill: $stage-paper;
stroke: $crayon-ink;
stroke-width: 3;
stroke-linejoin: round;
}
.testicrayon__quote {
position: relative;
margin: 0;
color: $crayon-ink;
font-weight: 700;
font-size: clamp(12px, 3vw, 14px);
line-height: 1.4;
}
.testicrayon__stars {
position: relative;
display: flex;
gap: $sp-1;
margin-top: $sp-1;
}
.testicrayon__star {
position: relative;
display: inline-block;
color: rgba($crayon-ink, .22);
font-size: 13px;
line-height: 1;
}
.testicrayon__star::after {
content: "★";
position: absolute;
inset: 0;
width: var(--fill);
overflow: hidden;
white-space: nowrap;
color: $crayon-yellow;
}
.testicrayon__caption {
position: relative;
margin: $sp-1 0 0;
color: rgba($crayon-ink, .72);
font-weight: 500;
font-size: 10px;
}
// 데모: 말풍선이 젤리처럼 세로로 눌렸다 펴지길 반복한다
@keyframes bubbleSquish {
0%, 100% { transform: scaleY(1); }
50% { transform: scaleY(.92); }
}
@media (max-width: 340px), (max-height: 220px) {
.testicrayon { gap: $sp-2; }
.testicrayon__avatar { width: 32px; height: 32px; }
.testicrayon__bubble { padding: $sp-3 $sp-3 $sp-2; }
.testicrayon__caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.testicrayon__bubble { animation: none !important; transform: none; }
}@charset "UTF-8";
html, body {
margin: 0;
overflow: hidden;
}
.stage {
box-sizing: border-box;
min-height: 100vh;
display: grid;
place-items: center;
margin: 0;
background: #fff8ef;
font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
padding: clamp(8px, 4vw, 24px);
}
.testicrayon {
margin: 0;
display: flex;
align-items: flex-start;
gap: 12px;
width: clamp(230px, 84vw, 340px);
}
.testicrayon__avatar {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background: repeating-conic-gradient(#9cb8ce 0deg 60deg, #6dbe6d 60deg 120deg);
border: 2px solid #fff8ef;
box-shadow: 0 0 0 2px #33261c;
}
.testicrayon__bubble {
position: relative;
flex: 1;
padding: 16px 16px 12px;
animation: bubbleSquish 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.testicrayon__frame {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
filter: url(#rough6);
}
.testicrayon__frame-path {
fill: #ffffff;
stroke: #33261c;
stroke-width: 3;
stroke-linejoin: round;
}
.testicrayon__quote {
position: relative;
margin: 0;
color: #33261c;
font-weight: 700;
font-size: clamp(12px, 3vw, 14px);
line-height: 1.4;
}
.testicrayon__stars {
position: relative;
display: flex;
gap: 4px;
margin-top: 4px;
}
.testicrayon__star {
position: relative;
display: inline-block;
color: rgba(51, 38, 28, 0.22);
font-size: 13px;
line-height: 1;
}
.testicrayon__star::after {
content: "★";
position: absolute;
inset: 0;
width: var(--fill);
overflow: hidden;
white-space: nowrap;
color: #d1c5a2;
}
.testicrayon__caption {
position: relative;
margin: 4px 0 0;
color: rgba(51, 38, 28, 0.72);
font-weight: 500;
font-size: 10px;
}
@keyframes bubbleSquish {
0%, 100% {
transform: scaleY(1);
}
50% {
transform: scaleY(0.92);
}
}
@media (max-width: 340px), (max-height: 220px) {
.testicrayon {
gap: 8px;
}
.testicrayon__avatar {
width: 32px;
height: 32px;
}
.testicrayon__bubble {
padding: 12px 12px 8px;
}
.testicrayon__caption {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
.testicrayon__bubble {
animation: none !important;
transform: none;
}
}import type { CSSProperties } from "react";
import styles from "./TestimonialCrayon.module.scss";
export type TestimonialCrayonProps = {
quote?: string;
name?: string;
stars?: number[];
duration?: number;
easing?: string;
color?: string;
};
type Vars = CSSProperties & { "--duration"?: string; "--easing"?: string; "--color"?: string };
export default function TestimonialCrayon({
quote = "우리 반 홈페이지 같아요",
name = "김도담 · 미술학원 원장",
stars = [100, 100, 100, 80, 40],
duration = 2000,
easing = "cubic-bezier(.2,.8,.2,1)",
color = "#ff5a5f",
}: TestimonialCrayonProps) {
const vars: Vars = { "--duration": `${duration}ms`, "--easing": easing, "--color": color };
return (
<figure className={styles.figure} style={vars}>
<svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true" focusable="false">
<filter id="tc-rough" x="-30%" y="-30%" width="160%" height="160%">
<feTurbulence type="fractalNoise" baseFrequency={0.05} numOctaves={2} seed={33} result="n" />
<feDisplacementMap in="SourceGraphic" in2="n" scale={6} xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<span className={styles.avatar} aria-hidden="true" />
<div className={styles.bubble}>
<svg className={styles.frame} viewBox="0 0 260 110" preserveAspectRatio="none" aria-hidden="true">
<path
className={styles.framePath}
d="M18 10 L242 10 C 250 10 252 18 252 26 L252 78 C 252 88 248 96 238 96 L48 96 L30 110 L34 94 L18 92 C 10 90 8 82 8 74 L8 26 C 8 16 10 10 18 10 Z"
/>
</svg>
<blockquote className={styles.quote}>{quote}</blockquote>
<div className={styles.stars} aria-hidden="true">
{stars.map((fill, i) => (
<span key={i} className={styles.star} aria-hidden="true" style={{ "--fill": `${fill}%` } as CSSProperties}>★</span>
))}
</div>
<figcaption className={styles.caption}>{name}</figcaption>
</div>
</figure>
);
}06 크레용 말풍선 후기 — 측정 누적면적 3.608% · 움직인 프레임 14/23GODRICH 원작 · zip 에 SCSS·React 포함 · 손그림 디자인 랜딩 UI 키트, 크레용 섹션 9개
이 데모가 속한 글
손그림 디자인 랜딩 UI 키트, 크레용 섹션 9개손그림 디자인은 굵고 삐뚤빼뚤한 크레용 선으로 테두리를 그리고, 그 선만 SVG 필터로 살짝 흔들어 종이 위에 손으로 그은 낙서처럼 보이게 만드는 스타일입니다. 동네 미술학원이나 어린이 브랜드 사이트에서 본 그 느낌 이 글의 데모 전부 보기
