{"id":2790,"date":"2025-04-11T02:36:03","date_gmt":"2025-04-11T02:36:03","guid":{"rendered":"https:\/\/rehenrik.design\/?page_id=2790"},"modified":"2025-11-17T23:28:32","modified_gmt":"2025-11-18T02:28:32","slug":"work","status":"publish","type":"page","link":"https:\/\/rehenrik.design\/br\/","title":{"rendered":"Trabalhos"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2790\" class=\"elementor elementor-2790\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-368b931 e-flex e-con-boxed e-con e-parent\" data-id=\"368b931\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-8030950 e-con-full e-flex e-con e-child\" data-id=\"8030950\" data-element_type=\"container\" data-settings=\"{&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-af2e397 e-con-full e-flex e-con e-child\" data-id=\"af2e397\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5bf3ee9 elementor-widget__width-initial elementor-widget elementor-widget-heading\" data-id=\"5bf3ee9\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Visual e Product Designer criando experi\u00eancias intuitivas<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-604ff1c elementor-widget__width-initial elementor-widget-tablet__width-initial elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"604ff1c\" data-element_type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:400,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Um designer vers\u00e1til, com mais de 10 anos de experi\u00eancia em ag\u00eancias, focado em interfaces de usu\u00e1rio equilibradas e com prop\u00f3sito.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-bbf2e19 e-con-full e-flex e-con e-child\" data-id=\"bbf2e19\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0f628f4 e-con-full animated-slow e-transform e-flex elementor-invisible e-con e-child\" data-id=\"0f628f4\" data-element_type=\"container\" data-settings=\"{&quot;animation_delay&quot;:500,&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;_transform_rotateZ_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;animation&quot;:&quot;fadeIn&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;laptop&quot;,&quot;tablet&quot;,&quot;mobile_extra&quot;,&quot;mobile&quot;],&quot;_transform_rotateZ_effect_hover_laptop&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile_extra&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fee2f05 elementor-laptop-align-justify elementor-align-justify elementor-mobile_extra-align-justify elementor-widget-mobile_extra__width-inherit elementor-widget__width-initial elementor-widget elementor-widget-button\" data-id=\"fee2f05\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"mailto:hello@rehenrik.design\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Vamos conversar<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d936569 e-con-full animated-slow e-transform e-flex elementor-invisible e-con e-child\" data-id=\"d936569\" data-element_type=\"container\" data-settings=\"{&quot;animation_delay&quot;:1000,&quot;_transform_rotateZ_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-1,&quot;sizes&quot;:[]},&quot;animation&quot;:&quot;fadeIn&quot;,&quot;_transform_rotateZ_effect_hover_laptop&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile_extra&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-711aa65 elementor-laptop-align-center copy-to-clipboard elementor-widget__width-initial elementor-mobile_extra-align-justify elementor-widget-mobile_extra__width-inherit elementor-widget elementor-widget-button\" data-id=\"711aa65\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"#\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t<span class=\"elementor-button-icon\">\n\t\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"32\" height=\"32\" viewbox=\"0 0 256 256\"><path d=\"M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z\"><\/path><\/svg>\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">hello@rehenrik.design<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8018033 e-con-full e-flex elementor-invisible e-con e-parent\" data-id=\"8018033\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;,&quot;animation_delay&quot;:300}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2971ef0 elementor-widget elementor-widget-html\" data-id=\"2971ef0\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\n:root{\n  --card-h-desktop: 400px;\n  --card-h-mobile: 240px;\n  --gap-desktop: 40px;\n  --gap-mobile: 16px;\n}\n\n\/* Faixa do carrossel *\/\n.card-stream{\n  position: relative;\n  width: 100vw;\n  height: var(--card-h-desktop);\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n}\n\n\/* Linha deslizante *\/\n.card-line{\n  display: flex;\n  align-items: center;\n  gap: var(--gap-desktop);\n  white-space: nowrap;\n  cursor: grab;\n  user-select: none;\n\n  \/* GPU friendly *\/\n  transform: translate3d(0,0,0);\n  touch-action: pan-y;\n  overscroll-behavior-x: contain;\n\n  -webkit-user-select: none;\n  -webkit-tap-highlight-color: transparent;\n}\n.card-line.working{ will-change: transform; } \/* liga s\u00f3 em drag\/in\u00e9rcia *\/\n.card-line:active, .card-line.dragging{ cursor: grabbing; }\n\n\/* Cada \u201cslot\u201d com altura fixa *\/\n.card-wrapper{\n  position: relative;\n  flex-shrink: 0;\n  height: var(--card-h-desktop);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n\/* Card = background-image; largura calculada no JS *\/\n.card{\n  height: 100%;\n  width: var(--card-w, 260px);     \/* fallback at\u00e9 sabermos o ratio real *\/\n  min-width: 140px;\n  border-radius: 12px;\n  overflow: hidden;\n\n  background-image: var(--bg);     \/* definido via IO quando vis\u00edvel *\/\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n\n  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;\n}\n\n@media (max-width: 767.98px){\n  .card-stream{ height: var(--card-h-mobile); }\n  .card-wrapper{ height: var(--card-h-mobile); }\n  .card-line{ gap: var(--gap-mobile); }\n}\n<\/style>\n\n<div class=\"card-stream\" id=\"cardStream\">\n  <div class=\"card-line\" id=\"cardLine\"><\/div>\n<\/div>\n\n<script>\nclass CardStreamController {\n  constructor() {\n    this.container = document.getElementById(\"cardStream\");\n    this.cardLine  = document.getElementById(\"cardLine\");\n\n    \/* f\u00edsica\/anim *\/\n    this.position = 0;\n    this.velocity = 120;\n    this.direction = -1;\n    this.isAnimating = true;\n    this.isDragging  = false;\n    this.lastTime = performance.now();\n    this.lastPointerX = 0;\n    this.mouseVelocity = 0;\n    this.friction = 0.95;\n    this.minVelocity = 30;\n    this.gapPx = 40;\n\n    \/* suas imagens *\/\n    this.cards = [\n      { src: \"\/wp-content\/uploads\/2025\/08\/Bubble-thumb.webp\",               label: \"Bubble\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/Cosmos-Control-Deck-thumb.webp\",  label: \"Cosmos Control Deck\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/MG4-thumb.webp\",                  label: \"MG4\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/nodes-thumb.webp\",                label: \"Nodes\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/EasyTax-thumb-.webp\",             label: \"EasyTax\" }, \/* confira URL *\/\n      { src: \"\/wp-content\/uploads\/2025\/08\/design-thumb-1.webp\",             label: \"Design\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/elevate-thumb.webp\",              label: \"Elevate\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/cards-thumb-1.webp\",              label: \"Cards\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/powerhouse-thumb.webp\",           label: \"Powerhouse\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/Beneath-the-surface-thumb.webp\",  label: \"Beneath the Surface\" },\n      { src: \"\/wp-content\/uploads\/2025\/08\/finance-thumb.webp\",              label: \"Finance\" },\n      { src: \"\/wp-content\/uploads\/2025\/09\/floratil.webp\",                      label: \"Floratil\" }\n    ];\n\n    this.dimCache = new Map();  \/\/ src -> {w,h}\n    this.io = this.makeObserver();\n\n    this.init();\n  }\n\n  \/* ----- IntersectionObserver: lazy-load do background ----- *\/\n  makeObserver(){\n    return new IntersectionObserver((entries)=>{\n      entries.forEach(entry=>{\n        if (!entry.isIntersecting) return;\n        const card = entry.target;\n        const src  = card.dataset.bg;\n        if (!src) { this.io.unobserve(card); return; }\n\n        \/\/ define o background (dispara o download real)\n        card.style.setProperty('--bg', `url(\"${src}\")`);\n\n        \/\/ ao mesmo tempo, carrega metadados p\/ ajustar largura ao ratio real\n        const img = new Image();\n        img.decoding = 'async';\n        img.onload = () => {\n          const w = img.naturalWidth || 1600;\n          const h = img.naturalHeight || 1000;\n          this.dimCache.set(src, {w,h});\n          this.applyWidthFromRatio(card, w, h);\n        };\n        img.onerror = () => {\n          \/\/ fallback: degrade lindo (evita card vazio)\n          card.style.setProperty('--bg', this.placeholderBG());\n          \/\/ deixa ratio default 16:10\n          this.applyWidthFromRatio(card, 1600, 1000);\n        };\n        img.src = src;\n\n        this.io.unobserve(card); \/\/ j\u00e1 est\u00e1 carregando, n\u00e3o precisa observar mais\n      });\n    }, { root: this.container, rootMargin: '200px' }); \/\/ prefetch quando chega perto\n  }\n\n  \/* ----- inicializa\u00e7\u00e3o ----- *\/\n  init(){\n    this.populate();           \/\/ cria DOM (sem baixar imagens ainda)\n    this.updateCardWidths();   \/\/ usa ratio default at\u00e9 cada img carregar\n    this.setupEventListeners();\n    this.animate();\n  }\n\n  \/* ----- DOM ----- *\/\n  populate(){\n    this.cardLine.innerHTML = \"\";\n    const count = 30; \/\/ \u201ccomo antes\u201d\n    for (let i=0;i<count;i++){\n      const item = this.cards[i % this.cards.length];\n      const el = this.createCard(item);\n      this.cardLine.appendChild(el);\n    }\n  }\n\n  createCard(item){\n    const wrapper = document.createElement(\"div\");\n    wrapper.className = \"card-wrapper\";\n\n    const card = document.createElement(\"div\");\n    card.className = \"card\";\n    card.setAttribute(\"role\", \"img\");\n    if (item.label) card.setAttribute(\"aria-label\", item.label);\n\n    \/\/ placeholder leve at\u00e9 a imagem real carregar\n    card.style.setProperty('--bg', this.placeholderBG());\n\n    \/\/ lazy: s\u00f3 definimos a real quando intersectar\n    card.dataset.bg = item.src;\n    this.io.observe(card);\n\n    wrapper.appendChild(card);\n    return wrapper;\n  }\n\n  \/* ----- largura proporcional (como antes) ----- *\/\n  updateCardWidths(){\n    const wrappers = this.cardLine.querySelectorAll(\".card-wrapper\");\n    wrappers.forEach(wrap => {\n      const card = wrap.firstElementChild;\n      const h = parseFloat(getComputedStyle(wrap).height) || 240;\n      \/\/ usa ratio real se j\u00e1 temos, sen\u00e3o 16:10\n      const bg = card.dataset.bg || '';\n      const meta = this.dimCache.get(bg);\n      const ratio = meta ? (meta.w \/ meta.h) : (16\/10);\n      const width = Math.max(140, Math.round(h * ratio));\n      card.style.setProperty(\"--card-w\", width + \"px\");\n    });\n  }\n  applyWidthFromRatio(card, w, h){\n    const wrap = card.parentElement;\n    const hh = parseFloat(getComputedStyle(wrap).height) || 240;\n    const width = Math.max(140, Math.round(hh * (w\/h)));\n    card.style.setProperty(\"--card-w\", width + \"px\");\n  }\n\n  \/* ----- placeholder como background (CSS gradient em data URL) ----- *\/\n  placeholderBG(){\n    \/\/ gradiente leve (data URL) pra evitar layout \u201cvazio\u201d\n    const c = document.createElement('canvas');\n    c.width = 32; c.height = 20; \/\/ pequeno (cache\u00e1vel)\n    const ctx = c.getContext('2d');\n    const g = ctx.createLinearGradient(0,0,32,20);\n    g.addColorStop(0,'#0f172a'); g.addColorStop(1,'#1e293b');\n    ctx.fillStyle = g; ctx.fillRect(0,0,32,20);\n    return `url(\"${c.toDataURL()}\")`;\n  }\n\n  \/* ----- eventos \/ drag ----- *\/\n  setupEventListeners(){\n    const updateGap = () => {\n      const g = getComputedStyle(this.cardLine).gap || \"40px\";\n      this.gapPx = parseFloat(g) || 40;\n    };\n    updateGap();\n\n    \/\/ recalcula larguras em resize\n    let resizeRaf = null;\n    const onResize = () => {\n      if (resizeRaf) cancelAnimationFrame(resizeRaf);\n      resizeRaf = requestAnimationFrame(()=> this.updateCardWidths());\n      updateGap();\n    };\n    window.addEventListener(\"resize\", onResize);\n\n    \/\/ drag (somente drag \u2014 sem wheel)\n    this.cardLine.addEventListener(\"mousedown\", (e)=>this.startDrag(e), { passive:false });\n    document.addEventListener(\"mousemove\", (e)=>this.onDrag(e), { passive:false });\n    document.addEventListener(\"mouseup\",   ()=>this.endDrag());\n\n    this.cardLine.addEventListener(\"touchstart\", (e)=>this.startDrag(e), { passive:false });\n    document.addEventListener(\"touchmove\",  (e)=>this.onDrag(e), { passive:false });\n    document.addEventListener(\"touchend\",   ()=>this.endDrag());\n    document.addEventListener(\"touchcancel\",()=>this.endDrag());\n\n    \/\/ nada de wheel \u2192 scroll da p\u00e1gina funciona normal\n  }\n\n  getClientX(evt){\n    if (evt.touches && evt.touches.length) return evt.touches[0].clientX;\n    if (evt.changedTouches && evt.changedTouches.length) return evt.changedTouches[0].clientX;\n    return evt.clientX;\n  }\n\n  startDrag(e){\n    e.preventDefault();\n    this.isDragging  = true;\n    this.isAnimating = true;                  \/\/ ativa in\u00e9rcia\n    this.cardLine.classList.add(\"dragging\",\"working\");\n\n    this.lastPointerX  = this.getClientX(e);\n    this.mouseVelocity = 0;\n\n    const t = getComputedStyle(this.cardLine).transform;\n    if (t !== \"none\") {\n      const m = new DOMMatrix(t);\n      this.position = m.m41;\n    }\n  }\n\n  onDrag(e){\n    if (!this.isDragging) return;\n    e.preventDefault();\n\n    const x = this.getClientX(e);\n    const dx = x - this.lastPointerX;\n    this.lastPointerX = x;\n\n    this.position += dx;\n    this.mouseVelocity = dx * 60;\n    this.applyTransform();\n    this.recycleIfNeeded();\n  }\n\n  endDrag(){\n    if(!this.isDragging) return;\n    this.isDragging = false;\n    this.cardLine.classList.remove(\"dragging\");\n\n    const speed = Math.abs(this.mouseVelocity);\n    this.velocity  = speed > 0 ? Math.max(this.minVelocity, speed) : this.minVelocity;\n    this.direction = this.mouseVelocity > 0 ? 1 : -1;\n\n    \/\/ mant\u00e9m \"working\" at\u00e9 a in\u00e9rcia parar\n    if (this.velocity <= this.minVelocity) this.cardLine.classList.remove(\"working\");\n  }\n\n  \/* ----- loop ----- *\/\n  animate(){\n    const now = performance.now();\n    const dt  = (now - this.lastTime) \/ 1000;\n    this.lastTime = now;\n\n    if (this.isAnimating && !this.isDragging) {\n      if (this.velocity > this.minVelocity) {\n        this.velocity *= this.friction;\n      } else {\n        this.velocity = Math.max(this.minVelocity, this.velocity);\n        \/\/ fim da in\u00e9rcia \u2192 desligar will-change\n        this.cardLine.classList.remove(\"working\");\n      }\n      this.position += this.velocity * this.direction * dt;\n      this.applyTransform();\n      this.recycleIfNeeded();\n    }\n    requestAnimationFrame(()=>this.animate());\n  }\n\n  applyTransform(){\n    this.cardLine.style.transform = `translate3d(${this.position}px,0,0)`;\n  }\n\n  \/* ----- reciclagem ----- *\/\n  recycleIfNeeded(){\n    const c = this.container.getBoundingClientRect();\n\n    let first = this.cardLine.firstElementChild;\n    while (first) {\n      const r = first.getBoundingClientRect();\n      if (r.right < c.left) {\n        const compensate = r.width + this.gapPx;\n        this.cardLine.appendChild(first);\n        this.position += compensate;\n        this.applyTransform();\n        first = this.cardLine.firstElementChild;\n      } else break;\n    }\n\n    let last = this.cardLine.lastElementChild;\n    while (last) {\n      const r = last.getBoundingClientRect();\n      if (r.left > c.right) {\n        const compensate = r.width + this.gapPx;\n        this.cardLine.prepend(last);\n        this.position -= compensate;\n        this.applyTransform();\n        last = this.cardLine.lastElementChild;\n      } else break;\n    }\n  }\n}\n\ndocument.addEventListener(\"DOMContentLoaded\", ()=>{\n  new CardStreamController();\n});\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-cd4e296 e-flex e-con-boxed e-con e-parent\" data-id=\"cd4e296\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-4d73461 e-con-full e-flex e-con e-child\" data-id=\"4d73461\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f4ee7b0 box-innershadow e-con-full e-flex e-con e-child\" data-id=\"f4ee7b0\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation_mobile_extra&quot;:&quot;none&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-0cd58b6 e-con-full e-flex e-con e-child\" data-id=\"0cd58b6\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-9d99f3a e-con-full e-flex e-con e-child\" data-id=\"9d99f3a\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5f4de88 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"5f4de88\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Transformando ideias em designs pr\u00e1ticos<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-af26824 elementor-widget__width-inherit elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"af26824\" data-element_type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:400,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Projetos que reduzem a complexidade e elevam a experi\u00eancia de intera\u00e7\u00e3o.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a259dc e-con-full e-flex e-con e-child\" data-id=\"8a259dc\" data-element_type=\"container\">\n\t\t<a class=\"elementor-element elementor-element-bc6cd70 e-con-full case e-flex e-con e-child\" data-id=\"bc6cd70\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" href=\"https:\/\/rehenrik.design\/br\/work\/floratil\">\n\t\t<div class=\"elementor-element elementor-element-d1f9c2a e-con-full container-case-thumb animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"d1f9c2a\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9d9b5b0 case-thumb elementor-widget elementor-widget-image\" data-id=\"9d9b5b0\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"640\" height=\"400\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/flo-t.webp\" class=\"attachment-large size-large wp-image-9016\" alt=\"Floratil\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/flo-t.webp 640w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/flo-t-300x188.webp 300w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/flo-t-18x12.webp 18w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fb204d0 e-con-full e-flex e-con e-child\" data-id=\"fb204d0\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d9fcc8b e-con-full e-flex e-con e-child\" data-id=\"d9fcc8b\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-cb1e921 e-con-full e-flex e-con e-child\" data-id=\"cb1e921\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-510b586 elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"510b586\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>2024 &#8211; 2025<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-89cb46e elementor-widget elementor-widget-heading\" data-id=\"89cb46e\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Floratil<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-794ab0d elementor-widget elementor-widget-text-editor\" data-id=\"794ab0d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Criamos a experi\u00eancia e aplicamos um Design System para garantir consist\u00eancia<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-26276a7 e-con-full e-flex e-con e-child\" data-id=\"26276a7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4180dea elementor-widget elementor-widget-text-editor\" data-id=\"4180dea\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UX\/UI Design<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5698ee8 elementor-widget elementor-widget-text-editor\" data-id=\"5698ee8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Design System<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-300c70f elementor-widget elementor-widget-text-editor\" data-id=\"300c70f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Prototyping<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-315afef elementor-widget elementor-widget-text-editor\" data-id=\"315afef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Handoff<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-151046a elementor-absolute icon-destaque elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"151046a\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewbox=\"0 0 16 16\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.29289 0.292893C7.68342 -0.0976311 8.31658 -0.0976311 8.70711 0.292893L15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071C6.90237 15.3166 6.90237 14.6834 7.29289 14.2929L12.5858 9H1C0.447715 9 0 8.55228 0 8C0 7.44772 0.447715 7 1 7L12.5858 7L7.29289 1.70711C6.90237 1.31658 6.90237 0.683417 7.29289 0.292893Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<a class=\"elementor-element elementor-element-ff6269b e-con-full case e-flex e-con e-child\" data-id=\"ff6269b\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" href=\"https:\/\/rehenrik.design\/br\/work\/base-theme\">\n\t\t<div class=\"elementor-element elementor-element-b16a18d e-con-full container-case-thumb animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"b16a18d\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-530d8af case-thumb elementor-widget elementor-widget-image\" data-id=\"530d8af\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"640\" height=\"400\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/base-t.webp\" class=\"attachment-large size-large wp-image-9015\" alt=\"Base Theme\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/base-t.webp 640w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/base-t-300x188.webp 300w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/base-t-18x12.webp 18w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a3532a e-con-full e-flex e-con e-child\" data-id=\"6a3532a\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-92d583a e-con-full e-flex e-con e-child\" data-id=\"92d583a\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-ffc7124 e-con-full e-flex e-con e-child\" data-id=\"ffc7124\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1322bdc elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"1322bdc\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>2023 \u2013 Atual<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8040c8a elementor-widget elementor-widget-heading\" data-id=\"8040c8a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Base Theme<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-24dac66 elementor-widget elementor-widget-text-editor\" data-id=\"24dac66\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Design system escal\u00e1vel com elementos essenciais<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a2d3dee e-con-full e-flex e-con e-child\" data-id=\"a2d3dee\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2edb837 elementor-widget elementor-widget-text-editor\" data-id=\"2edb837\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Design System<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f6203d0 elementor-widget elementor-widget-text-editor\" data-id=\"f6203d0\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Documenta\u00e7\u00e3o<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-03ad883 elementor-widget elementor-widget-text-editor\" data-id=\"03ad883\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Foundations<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d49759 elementor-widget elementor-widget-text-editor\" data-id=\"6d49759\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Vari\u00e1veis<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-749829f elementor-widget elementor-widget-text-editor\" data-id=\"749829f\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Atomic Design<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3d819ef elementor-absolute icon-destaque elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"3d819ef\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewbox=\"0 0 16 16\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.29289 0.292893C7.68342 -0.0976311 8.31658 -0.0976311 8.70711 0.292893L15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071C6.90237 15.3166 6.90237 14.6834 7.29289 14.2929L12.5858 9H1C0.447715 9 0 8.55228 0 8C0 7.44772 0.447715 7 1 7L12.5858 7L7.29289 1.70711C6.90237 1.31658 6.90237 0.683417 7.29289 0.292893Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t<a class=\"elementor-element elementor-element-fe0cd96 e-con-full case e-flex e-con e-child\" data-id=\"fe0cd96\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\" href=\"https:\/\/rehenrik.design\/br\/work\/serasa\">\n\t\t<div class=\"elementor-element elementor-element-92e9899 e-con-full container-case-thumb animated-slow e-flex elementor-invisible e-con e-child\" data-id=\"92e9899\" data-element_type=\"container\" data-settings=\"{&quot;animation&quot;:&quot;fadeIn&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-bc8ed06 case-thumb elementor-widget elementor-widget-image\" data-id=\"bc8ed06\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"640\" height=\"400\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/sera-t.webp\" class=\"attachment-large size-large wp-image-9017\" alt=\"Serasa Experian\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/sera-t.webp 640w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/sera-t-300x188.webp 300w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/sera-t-18x12.webp 18w\" sizes=\"(max-width: 640px) 100vw, 640px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-574d3f4 e-con-full e-flex e-con e-child\" data-id=\"574d3f4\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-d9f668c e-con-full e-flex e-con e-child\" data-id=\"d9f668c\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-ebefbb7 e-con-full e-flex e-con e-child\" data-id=\"ebefbb7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-19435e4 elementor-widget__width-inherit elementor-widget elementor-widget-text-editor\" data-id=\"19435e4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>2022<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ede032 elementor-widget elementor-widget-heading\" data-id=\"0ede032\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Serasa Experian<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c32836 elementor-widget elementor-widget-text-editor\" data-id=\"7c32836\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Redesign para tornar a experi\u00eancia mais intuitiva e f\u00e1cil de navegar<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-45a89c6 e-con-full e-flex e-con e-child\" data-id=\"45a89c6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8fbb558 elementor-widget elementor-widget-text-editor\" data-id=\"8fbb558\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>UI Design<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-39f9eff elementor-widget elementor-widget-text-editor\" data-id=\"39f9eff\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Visual Design<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-58c301e elementor-widget elementor-widget-text-editor\" data-id=\"58c301e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Prototyping<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0889e2c elementor-absolute icon-destaque elementor-hidden-tablet elementor-hidden-mobile_extra elementor-hidden-mobile elementor-view-default elementor-widget elementor-widget-icon\" data-id=\"0889e2c\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"icon.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-icon-wrapper\">\n\t\t\t<div class=\"elementor-icon\">\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"16\" height=\"16\" viewbox=\"0 0 16 16\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7.29289 0.292893C7.68342 -0.0976311 8.31658 -0.0976311 8.70711 0.292893L15.7071 7.29289C16.0976 7.68342 16.0976 8.31658 15.7071 8.70711L8.70711 15.7071C8.31658 16.0976 7.68342 16.0976 7.29289 15.7071C6.90237 15.3166 6.90237 14.6834 7.29289 14.2929L12.5858 9H1C0.447715 9 0 8.55228 0 8C0 7.44772 0.447715 7 1 7L12.5858 7L7.29289 1.70711C6.90237 1.31658 6.90237 0.683417 7.29289 0.292893Z\"><\/path><\/svg>\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c74661a box-innershadow e-con-full e-flex e-con e-child\" data-id=\"c74661a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;animation_mobile_extra&quot;:&quot;none&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-284d0eb e-con-full e-flex e-con e-child\" data-id=\"284d0eb\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-9d73b05 e-con-full e-flex e-con e-child\" data-id=\"9d73b05\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5419c4a elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"5419c4a\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Projetando com profundidade<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f2a277b elementor-widget__width-inherit elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"f2a277b\" data-element_type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:400,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Apenas eu, transformando esbo\u00e7os e cliques em experi\u00eancias que parecem vivas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-31764b0 e-con-full e-flex e-con e-child\" data-id=\"31764b0\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-5c4fe1a e-con-full e-flex e-con e-child\" data-id=\"5c4fe1a\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-a6860ad e-con-full e-flex e-con e-child\" data-id=\"a6860ad\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a270f1e elementor-absolute elementor-invisible elementor-widget elementor-widget-image\" data-id=\"a270f1e\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;,&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation_delay&quot;:200}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"400\" height=\"361\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/desenho.webp\" class=\"attachment-large size-large wp-image-8752\" alt=\"\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/desenho.webp 400w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/desenho-300x271.webp 300w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/desenho-13x12.webp 13w\" sizes=\"(max-width: 400px) 100vw, 400px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f1ffda5 elementor-absolute elementor-invisible elementor-widget elementor-widget-image\" data-id=\"f1ffda5\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;,&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation_delay&quot;:400}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"344\" height=\"361\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/mp.webp\" class=\"attachment-large size-large wp-image-8761\" alt=\"\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/mp.webp 344w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/mp-286x300.webp 286w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/mp-11x12.webp 11w\" sizes=\"(max-width: 344px) 100vw, 344px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-32cfcde elementor-absolute elementor-invisible elementor-widget elementor-widget-image\" data-id=\"32cfcde\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;,&quot;_position&quot;:&quot;absolute&quot;,&quot;_animation_delay&quot;:1200}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"327\" height=\"348\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/eu2.webp\" class=\"attachment-large size-large wp-image-8753\" alt=\"\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/eu2.webp 327w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/eu2-282x300.webp 282w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/eu2-11x12.webp 11w\" sizes=\"(max-width: 327px) 100vw, 327px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8893f8e e-con-full e-flex e-con e-child\" data-id=\"8893f8e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d8f607e elementor-widget__width-initial elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"d8f607e\" data-element_type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:400,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Eu cresci em S\u00e3o Paulo e, desde pequeno, o desenho faz parte da minha vida. Na inf\u00e2ncia, comecei a brincar com o Photoshop e l\u00e1 descobri uma nova maneira de explorar a criatividade. Hoje, \u00e9 no design que encontrei meu caminho para transformar ideias em algo real.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8a68606 e-con-full animated-slow e-transform e-flex elementor-invisible e-con e-child\" data-id=\"8a68606\" data-element_type=\"container\" data-settings=\"{&quot;animation_delay&quot;:600,&quot;_transform_rotateZ_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:-1,&quot;sizes&quot;:[]},&quot;animation&quot;:&quot;fadeIn&quot;,&quot;_transform_rotateZ_effect_hover_laptop&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile_extra&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-01976e5 elementor-laptop-align-center elementor-widget__width-initial elementor-mobile_extra-align-justify elementor-widget-mobile_extra__width-inherit elementor-widget elementor-widget-button\" data-id=\"01976e5\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/rehenrik.design\/br\/about\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Um breve resumo <\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-ddd8436 e-con-full e-flex e-con e-child\" data-id=\"ddd8436\" data-element_type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-0bf9112 e-con-full e-flex e-con e-child\" data-id=\"0bf9112\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53921d1 elementor-widget__width-initial elementor-widget-mobile_extra__width-inherit elementor-invisible elementor-widget elementor-widget-text-editor\" data-id=\"53921d1\" data-element_type=\"widget\" data-settings=\"{&quot;_animation_delay&quot;:400,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;_animation&quot;:&quot;fadeIn&quot;}\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Meu foco \u00e9 criar interfaces que n\u00e3o sejam apenas limpas e intuitivas, mas tamb\u00e9m agrad\u00e1veis de usar. Al\u00e9m disso, construo Design Systems robustos e escal\u00e1veis que d\u00e3o consist\u00eancia \u00e0s equipes. O que me motiva \u00e9 transformar complexidade em experi\u00eancias que pare\u00e7am refinadas e naturais de usar.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4709428 e-con-full animated-slow e-transform e-flex elementor-invisible e-con e-child\" data-id=\"4709428\" data-element_type=\"container\" data-settings=\"{&quot;animation_delay&quot;:400,&quot;_transform_rotateZ_effect_hover&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1,&quot;sizes&quot;:[]},&quot;animation&quot;:&quot;fadeIn&quot;,&quot;_transform_rotateZ_effect_hover_laptop&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_tablet&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile_extra&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]},&quot;_transform_rotateZ_effect_hover_mobile&quot;:{&quot;unit&quot;:&quot;deg&quot;,&quot;size&quot;:&quot;&quot;,&quot;sizes&quot;:[]}}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3fcaf5c elementor-laptop-align-center elementor-widget__width-initial elementor-mobile_extra-align-justify elementor-widget-mobile_extra__width-inherit elementor-widget elementor-widget-button\" data-id=\"3fcaf5c\" data-element_type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/rehenrik.design\/br\/playground\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Explorar Playground<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-6a24274 e-con-full e-flex e-con e-child\" data-id=\"6a24274\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e3d388d elementor-invisible elementor-widget elementor-widget-image\" data-id=\"e3d388d\" data-element_type=\"widget\" data-settings=\"{&quot;_animation&quot;:&quot;zoomIn&quot;}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"673\" height=\"546\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/DS.webp\" class=\"attachment-large size-large wp-image-9093\" alt=\"\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/DS.webp 673w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/DS-300x243.webp 300w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/09\/DS-15x12.webp 15w\" sizes=\"(max-width: 673px) 100vw, 673px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0ef4d20 elementor-absolute elementor-invisible elementor-widget elementor-widget-image\" data-id=\"0ef4d20\" data-element_type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_effect&quot;:&quot;yes&quot;,&quot;motion_fx_mouseTrack_speed&quot;:{&quot;unit&quot;:&quot;px&quot;,&quot;size&quot;:1.5,&quot;sizes&quot;:[]},&quot;_animation&quot;:&quot;zoomIn&quot;,&quot;_animation_delay&quot;:400}\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img loading=\"lazy\" decoding=\"async\" width=\"140\" height=\"81\" src=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/08\/Fig-Renato.webp\" class=\"attachment-large size-large wp-image-6622\" alt=\"\" srcset=\"https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/08\/Fig-Renato.webp 140w, https:\/\/rehenrik.design\/wp-content\/uploads\/2025\/08\/Fig-Renato-18x10.webp 18w\" sizes=\"(max-width: 140px) 100vw, 140px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4abd4c3 e-con-full e-flex e-con e-child\" data-id=\"4abd4c3\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;animation_mobile_extra&quot;:&quot;none&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e6fe56a elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"e6fe56a\" data-element_type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;laptop&quot;,&quot;tablet&quot;,&quot;mobile_extra&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Habilidades nas quais tenho confian\u00e7a<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b283a89 elementor-widget elementor-widget-html\" data-id=\"b283a89\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!-- ====== Pills com gravidade (unificado para Elementor) ====== -->\n<div class=\"gravity-pills-wrap\">\n  <canvas id=\"physCanvas\"><\/canvas>   <!-- canvas da f\u00edsica (eventos) -->\n  <canvas id=\"labelCanvas\"><\/canvas>  <!-- canvas dos textos\/desenho -->\n<\/div>\n\n<style>\n  .gravity-pills-wrap{\n    position:relative;\n    width:100%;\n    height:200px;            \/* altura fixa desktop *\/\n    background:#f6f5f1;\n    border-radius:12px;\n    border:1px solid #00000015;\n    overflow:hidden;\n  }\n  \n    body.dark-mode .gravity-pills-wrap{\n    background:#121216 !important;\n    border:1px solid #ffffff05 !important;\n  }\n  @media (max-width:800px){\n    .gravity-pills-wrap{\n      height:300px;          \/* altura fixa mobile *\/\n      pointer-events:none;   \/* mant\u00e9m seu comportamento: sem drag no mobile *\/\n    }\n  }\n  .gravity-pills-wrap canvas{\n    position:absolute; inset:0;\n    width:100%; height:100%;\n    display:block;\n    \/* permite scroll vertical no mobile; ainda aceita drag quando habilitado *\/\n    touch-action: pan-y;\n  }\n  #labelCanvas{ pointer-events:none; }\n<\/style>\n\n<!-- Matter.js (apenas uma vez) -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/matter-js@0.19.0\/build\/matter.min.js\"><\/script>\n\n<script>\n(function(){\n  \/* ====== CONFIG ====== *\/\n  const TAGS = [\n    \"UI\",\"Design System\",\"Elementor\",\"Web Design\",\"UX\",\n    \"Interactive Design\",\"WordPress\",\"Digital Design\",\n    \"Figma\",\"Midjourney\",\"Procreate\",\"Prototyping\",\"Prompting\",\n    \"Wireframing\",\"No-code\",\"Color Tokens\",\"Figma Variables\"\n  ];\n\n  \/\/ estilo das PILLS\n  const PILL_BG      = \"#FE4311\";\n  const TEXT_COLOR   = \"#ffffff\";\n  const BORDER_COLOR = \"#EB0800\";\n  const RADIUS       = 12;\n\n  \/\/ f\u00edsica e medidas\n  const FONT_SIZE  = 16;\n  const FONT_FACE  = \"Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif\";\n  const FONT_CSS   = `500 ${FONT_SIZE}px ${FONT_FACE}`;\n  const PADDING_X  = 16;\n  const PADDING_Y  = 10;\n  const GRAVITY_Y  = 1.0;\n  const RESTIT     = 0.20;\n  const FRICTION   = 0.22;\n  const AIR        = 0.012;\n\n  \/* ====== ELEMENTOS ====== *\/\n  const wrap        = document.querySelector('.gravity-pills-wrap');\n  const physCanvas  = document.getElementById('physCanvas');   \/\/ recebe eventos (drag)\n  const labelCanvas = document.getElementById('labelCanvas');  \/\/ desenha tudo\n  if(!wrap || !physCanvas || !labelCanvas){ return; }\n\n  const DPR = () => (window.devicePixelRatio || 1);\n  function sizeCanvases(){\n    const dpr = DPR();\n    const w = wrap.clientWidth, h = wrap.clientHeight;\n    [physCanvas, labelCanvas].forEach(cv=>{\n      cv.width  = Math.floor(w * dpr);\n      cv.height = Math.floor(h * dpr);\n      cv.style.width  = w + \"px\";\n      cv.style.height = h + \"px\";\n    });\n  }\n  sizeCanvases();\n\n  \/* ====== MATTER (sem Render visual) ====== *\/\n  const {Engine, Bodies, Composite, Mouse, MouseConstraint} = Matter;\n\n  const engine = Engine.create({ enableSleeping:false });\n  engine.gravity.y = GRAVITY_Y;\n\n  function measureLabel(ctx, label){\n    ctx.save();\n    ctx.setTransform(1,0,0,1,0,0);\n    ctx.font = FONT_CSS;\n    const w = ctx.measureText(label).width + PADDING_X*2;\n    const h = FONT_SIZE + PADDING_Y*2;\n    ctx.restore();\n    return {w, h};\n  }\n\n  function addWalls(){\n    const w = wrap.clientWidth, h = wrap.clientHeight;\n    const thick = 80;\n    Composite.add(engine.world, [\n      Bodies.rectangle(w\/2, h + thick\/2, w, thick, {isStatic:true}),\n      Bodies.rectangle(w\/2, -thick\/2,    w, thick, {isStatic:true}),\n      Bodies.rectangle(-thick\/2, h\/2,    thick, h, {isStatic:true}),\n      Bodies.rectangle(w + thick\/2, h\/2, thick, h, {isStatic:true})\n    ]);\n  }\n\n  function addPills(){\n    const w = wrap.clientWidth, h = wrap.clientHeight;\n    const ctxMeasure = labelCanvas.getContext('2d');\n\n    const bodies = TAGS.map(label=>{\n      const {w:pw, h:ph} = measureLabel(ctxMeasure, label);\n      const x = Math.max(pw\/2 + 10, Math.min(w - pw\/2 - 10, Math.random()*w));\n      const y = Math.random()*Math.max(40, h*0.35) + 10;\n\n      const body = Bodies.rectangle(x, y, pw, ph, {\n        chamfer: { radius: RADIUS },\n        restitution: RESTIT,\n        friction: FRICTION,\n        frictionAir: AIR\n      });\n      body.plugin = { label, w: pw, h: ph };\n      return body;\n    });\n\n    Composite.add(engine.world, bodies);\n  }\n\n  \/\/ espere fontes (se houver) para medir direito\n  const fontsReady = (document.fonts && document.fonts.ready) ? document.fonts.ready : Promise.resolve();\n  fontsReady.then(()=>{ addWalls(); addPills(); });\n\n  \/* ====== DRAG ====== *\/\n  const mouse = Mouse.create(physCanvas);\n  const mouseConstraint = MouseConstraint.create(engine, {\n    mouse,\n    constraint: { stiffness: 0.35, angularStiffness: 0.2, render: { visible:false } }\n  });\n  Composite.add(engine.world, mouseConstraint);\n\n  \/\/ Libera scroll no desktop: intercepta wheel antes do Matter\n  ['wheel','mousewheel','DOMMouseScroll'].forEach(evt=>{\n    physCanvas.addEventListener(evt, (e)=>{\n      e.stopImmediatePropagation(); \/\/ evita preventDefault do Matter no wheel\n      \/\/ sem preventDefault => navegador rola a p\u00e1gina\n    }, { passive:true, capture:true });\n  });\n\n  \/* ====== DESENHO ====== *\/\n  const ctx = labelCanvas.getContext('2d');\n\n  function roundRectPath(c, w, h, r){\n    c.beginPath();\n    c.moveTo(-w\/2 + r, -h\/2);\n    c.lineTo( w\/2 - r, -h\/2);\n    c.quadraticCurveTo( w\/2, -h\/2,  w\/2, -h\/2 + r);\n    c.lineTo( w\/2,  h\/2 - r);\n    c.quadraticCurveTo( w\/2,  h\/2,  w\/2 - r,  h\/2);\n    c.lineTo(-w\/2 + r,  h\/2);\n    c.quadraticCurveTo(-w\/2,  h\/2, -w\/2,  h\/2 - r);\n    c.lineTo(-w\/2, -h\/2 + r);\n    c.quadraticCurveTo(-w\/2, -h\/2, -w\/2 + r, -h\/2);\n    c.closePath();\n  }\n\n  function drawOverlay(){\n    const dpr = DPR();\n    const W = wrap.clientWidth, H = wrap.clientHeight;\n    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    ctx.clearRect(0,0,W,H);\n\n    const bodies = Matter.Composite.allBodies(engine.world);\n    bodies.forEach(b=>{\n      if (!b.plugin || !b.plugin.label) return;\n      const w = b.plugin.w, h = b.plugin.h;\n\n      ctx.save();\n      ctx.translate(b.position.x, b.position.y);\n      ctx.rotate(b.angle);\n\n      roundRectPath(ctx, w, h, RADIUS);\n      ctx.fillStyle = PILL_BG;\n      ctx.fill();\n      ctx.lineWidth = 0.5;\n      ctx.strokeStyle = BORDER_COLOR;\n      ctx.stroke();\n\n      ctx.font = FONT_CSS;\n      ctx.fillStyle = TEXT_COLOR;\n      ctx.textAlign = \"center\";\n      ctx.textBaseline = \"middle\";\n      ctx.fillText(b.plugin.label, 0, 0);\n\n      ctx.restore();\n    });\n  }\n\n  \/\/ loop manual\n  let last = performance.now();\n  function tick(now){\n    const dt = Math.min(32, now - last); \/\/ limita dt p\/ estabilidade\n    last = now;\n    Matter.Engine.update(engine, dt);\n    drawOverlay();\n    requestAnimationFrame(tick);\n  }\n  requestAnimationFrame(tick);\n\n  \/* ====== Resize sem resetar no scroll mobile ====== *\/\n  function rebuild(){\n    Matter.Composite.clear(engine.world, true);\n    addWalls();\n    addPills();\n  }\n\n  let lastSize = { w: wrap.clientWidth, h: wrap.clientHeight };\n  function safeResize(newW, newH){\n    const dW = Math.abs(newW - lastSize.w);\n    const dH = Math.abs(newH - lastSize.h);\n    \/\/ Reconstr\u00f3i s\u00f3 se largura mudar (layout) ou varia\u00e7\u00e3o for grande\n    const significant = dW >= 8 || dH >= 80;\n    if (!significant) return;\n\n    lastSize = { w: newW, h: newH };\n    sizeCanvases();\n    rebuild();\n  }\n\n  const ro = new ResizeObserver(() => {\n    const w = wrap.clientWidth;\n    const h = wrap.clientHeight;\n    safeResize(w, h);\n  });\n  ro.observe(wrap);\n\n  window.addEventListener('orientationchange', () => {\n    lastSize = { w: -1, h: -1 }; \/\/ for\u00e7a significativo\n    sizeCanvases();\n    rebuild();\n  }, { passive: true });\n\n  \/\/ pausa fora de foco\n  document.addEventListener('visibilitychange', ()=>{\n    if (document.visibilityState !== 'visible') {\n      last = performance.now();\n    }\n  });\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-eb1dd6d e-con-full e-flex e-con e-child\" data-id=\"eb1dd6d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;,&quot;motion_fx_motion_fx_mouse&quot;:&quot;yes&quot;,&quot;animation_mobile_extra&quot;:&quot;none&quot;}\">\n\t\t<section class=\"elementor-element elementor-element-68c1623 e-con-full e-flex e-con e-child\" data-id=\"68c1623\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec3a8b1 elementor-widget__width-inherit elementor-widget elementor-widget-heading\" data-id=\"ec3a8b1\" data-element_type=\"widget\" data-settings=\"{&quot;motion_fx_motion_fx_scrolling&quot;:&quot;yes&quot;,&quot;motion_fx_devices&quot;:[&quot;desktop&quot;,&quot;laptop&quot;,&quot;tablet&quot;,&quot;mobile_extra&quot;,&quot;mobile&quot;]}\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Ajudei a criar produtos que impulsionam empresas l\u00edderes<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/section>\n\t\t<div class=\"elementor-element elementor-element-5c2079e e-con-full box-innershadow e-flex e-con e-child\" data-id=\"5c2079e\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db1f0d8 elementor-widget elementor-widget-html\" data-id=\"db1f0d8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"marquee-logos\">\n  <div class=\"marquee-content-logos\">\n\n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/08\/baldan.svg\" alt=\"Baldan\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/dimensa.svg\" alt=\"Dimensa\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/feriaseco.svg\" alt=\"F\u00e9rias & Co.\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/floratil.svg\" alt=\"Floratil\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/iugu.svg\" alt=\"Iugu\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/minhabiblioteca.svg\" alt=\"Minha Biblioteca\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/serasa.svg\" alt=\"Serasa Experian\" \/>\n    <\/div>\n\n\n\n\n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/08\/baldan.svg\" alt=\"Baldan\" \/>\n    <\/div>\n\n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/dimensa.svg\" alt=\"Dimensa\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/feriaseco.svg\" alt=\"F\u00e9rias & Co.\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/floratil.svg\" alt=\"Floratil\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/iugu.svg\" alt=\"Iugu\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/minhabiblioteca.svg\" alt=\"Minha Biblioteca\" \/>\n    <\/div>\n    \n    <div class=\"marquee-item-logos\">\n      <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/04\/serasa.svg\" alt=\"Serasa Experian\" \/>\n    <\/div>\n\n\n  <\/div>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Visual and Product Designer shaping intuitive experiences A multifaceted designer with over 10 years of agency experience, focused on purposeful, balanced user interfaces. Let&#8217;s talk hello@rehenrik.design Turning ideas into usable Designs Projects that simplify complexity and improve how people interact. 2024 &#8211; 2025 Floratil Created the experience and applied a Design System for consistency UX\/UI <a href=\"https:\/\/rehenrik.design\/br\/\" class=\"more-link\">&#8230;<span class=\"screen-reader-text\">  Trabalhos<\/span><\/a><\/p>","protected":false},"author":1,"featured_media":6246,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-2790","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.0 (Yoast SEO v25.9) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Work - rehenrik<\/title>\n<meta name=\"description\" content=\"Renato Henrique \u2014 Visual and Product Designer with 10+ years of experience in UI\/UX and Design Systems. Crafting intuitive, consistent, and engaging digital experiences.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rehenrik.design\/br\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Work - rehenrik\" \/>\n<meta property=\"og:description\" content=\"Renato Henrique \u2014 Visual and Product Designer with 10+ years of experience in UI\/UX and Design Systems. Crafting intuitive, consistent, and engaging digital experiences.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rehenrik.design\/br\/\" \/>\n<meta property=\"og:site_name\" content=\"rehenrik\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-18T02:28:32+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data1\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rehenrik.design\/\",\"url\":\"https:\/\/rehenrik.design\/\",\"name\":\"Work - rehenrik\",\"isPartOf\":{\"@id\":\"https:\/\/rehenrik.design\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rehenrik.design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/rehenrik.design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png\",\"datePublished\":\"2025-04-11T02:36:03+00:00\",\"dateModified\":\"2025-11-18T02:28:32+00:00\",\"description\":\"Renato Henrique \u2014 Visual and Product Designer with 10+ years of experience in UI\/UX and Design Systems. Crafting intuitive, consistent, and engaging digital experiences.\",\"breadcrumb\":{\"@id\":\"https:\/\/rehenrik.design\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rehenrik.design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/rehenrik.design\/#primaryimage\",\"url\":\"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png\",\"contentUrl\":\"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png\",\"width\":512,\"height\":512,\"caption\":\"Logo\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rehenrik.design\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/rehenrik.design\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Work\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rehenrik.design\/#website\",\"url\":\"https:\/\/rehenrik.design\/\",\"name\":\"rehenrik\",\"description\":\"Product Designer\",\"publisher\":{\"@id\":\"https:\/\/rehenrik.design\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rehenrik.design\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/rehenrik.design\/#organization\",\"name\":\"rehenrik\",\"url\":\"https:\/\/rehenrik.design\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/rehenrik.design\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png\",\"contentUrl\":\"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png\",\"width\":512,\"height\":512,\"caption\":\"rehenrik\"},\"image\":{\"@id\":\"https:\/\/rehenrik.design\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Work - rehenrik","description":"Renato Henrique \u2014 Visual and Product Designer with 10+ years of experience in UI\/UX and Design Systems. Crafting intuitive, consistent, and engaging digital experiences.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rehenrik.design\/br\/","og_locale":"pt_BR","og_type":"article","og_title":"Work - rehenrik","og_description":"Renato Henrique \u2014 Visual and Product Designer with 10+ years of experience in UI\/UX and Design Systems. Crafting intuitive, consistent, and engaging digital experiences.","og_url":"https:\/\/rehenrik.design\/br\/","og_site_name":"rehenrik","article_modified_time":"2025-11-18T02:28:32+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rehenrik.design\/","url":"https:\/\/rehenrik.design\/","name":"Work - rehenrik","isPartOf":{"@id":"https:\/\/rehenrik.design\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rehenrik.design\/#primaryimage"},"image":{"@id":"https:\/\/rehenrik.design\/#primaryimage"},"thumbnailUrl":"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png","datePublished":"2025-04-11T02:36:03+00:00","dateModified":"2025-11-18T02:28:32+00:00","description":"Renato Henrique \u2014 Visual and Product Designer with 10+ years of experience in UI\/UX and Design Systems. Crafting intuitive, consistent, and engaging digital experiences.","breadcrumb":{"@id":"https:\/\/rehenrik.design\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rehenrik.design\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/rehenrik.design\/#primaryimage","url":"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png","width":512,"height":512,"caption":"Logo"},{"@type":"BreadcrumbList","@id":"https:\/\/rehenrik.design\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rehenrik.design\/"},{"@type":"ListItem","position":2,"name":"Work"}]},{"@type":"WebSite","@id":"https:\/\/rehenrik.design\/#website","url":"https:\/\/rehenrik.design\/","name":"rehenrik","description":"Product Designer","publisher":{"@id":"https:\/\/rehenrik.design\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rehenrik.design\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Organization","@id":"https:\/\/rehenrik.design\/#organization","name":"rehenrik","url":"https:\/\/rehenrik.design\/","logo":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/rehenrik.design\/#\/schema\/logo\/image\/","url":"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png","contentUrl":"https:\/\/rehenrik.design\/wp-content\/uploads\/2023\/07\/logo.png","width":512,"height":512,"caption":"rehenrik"},"image":{"@id":"https:\/\/rehenrik.design\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/pages\/2790","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/comments?post=2790"}],"version-history":[{"count":550,"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/pages\/2790\/revisions"}],"predecessor-version":[{"id":9340,"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/pages\/2790\/revisions\/9340"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/media\/6246"}],"wp:attachment":[{"href":"https:\/\/rehenrik.design\/br\/wp-json\/wp\/v2\/media?parent=2790"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}