neumorphic-club-fintech

Neumorphic club fintech

Un sitio de finanzas solo para miembros tallado a partir de dos materiales suaves: una página oscura e islas claras incrustadas en ella (tarjetas, paneles, monedas, el teléfono, barras de preguntas frecuentes). Dentro de cada material, los botones y los pozos están empujados hacia afuera o presionados hacia adentro, y una luz que sigue al cursor hace que el relieve se sienta físico. El tema claro intercambia los dos: página clara, islas oscuras. El tono es tranquilo y exclusivo: grandes declaraciones en serif minúsculas, poco texto, mucho aire.

La construcción de referencia es example/index.html (Atlasio Reserve, un club de tarjetas ficticio, EN/TR, relieve oscuro y claro). El código detallado está en references/components.md; screenshots/ muestra cada sección en escritorio, móvil, ambos temas y en turco.

Si el usuario nombra un sitio de referencia, toma solo su estructura y ambiente. Nunca copies sus renders, nombres de productos, texto o logotipo.

1. Antes de diseñar

1. Recopila la oferta real: promesa en una línea, quién califica, 3–5 características del producto, recompensas, declaración de seguridad, calificaciones o conteo de miembros solo si el cliente puede respaldarlos, preguntas frecuentes, enlaces de la aplicación. Etiqueta cualquier otra cosa como muestra.
2. Nunca inventes certificaciones de seguridad, tasas de interés, tarifas, reglas de aprobación o efectos en el puntaje crediticio. El texto financiero está regulado; deja un marcador de posición que indique lo que debe ir allí.
3. Elige el único estado activo que obtiene el LED lima (fecha de vencimiento, pago recibido, tarjeta activa). El acento no aparece en ningún otro lugar excepto en el texto del botón primario y los anillos de enfoque.

2. ADN visual

Elemento	Regla
Materiales	Dos. Página: oscuro #272a31 (alto #2e3139, bajo #212329). Islas (.alt): claro #e6e9ee (alto #f1f3f6, bajo #d7dbe1). El tema claro los intercambia. Dentro de un material, cada superficie es de ese color. Nunca negro o blanco puros: las sombras necesitan espacio en ambos lados.
Islas	Tarjetas, paneles de historia y unirse, el teléfono, baldosas de carril, monedas, dial, baldosas de calificación, barras de preguntas frecuentes, promoción del pie de página, insignia de la aplicación. Encabezado, copia del héroe, pozos de estadísticas, encabezados y el pie de página permanecen en el material de la página. Apunta a aproximadamente la mitad claro, mitad oscuro en cada pantalla.
Relieve	Elevado = X Y 24px oscuro, -X -Y 24px claro; presionado = el mismo par inset. Material oscuro rgba(0,0,0,.55) / rgba(255,255,255,.06); material claro rgba(146,156,172,.75) / rgba(255,255,255,.95). Variantes pequeñas con desplazamiento a la mitad. Las perillas y chips convexos añaden linear-gradient(145deg, alto, bajo). La sombra exterior propia de una isla cae sobre la página, por lo que usa el par de la página (--island), nunca su propio resaltado blanco (eso brillaría como un halo sobre oscuro).
Luz	Los desplazamientos provienen de --lx/--ly (un vector unitario). Luz predeterminada superior izquierda (.7071, .7071); JS la gira hacia el cursor.
Texto	Cada material tiene su propia tinta: en oscuro #f4f5f7 / #c9cdd5 / #959aa4, en claro #191c22 / #3c414c / #5f6571. El texto nunca tiene bajo contraste: el relieve es para superficies, no para el tipo que debes leer.
Acento	LED lima #b9f26b en material oscuro, #3e8a1d en material claro, con un pequeño resplandor. Los pozos de características pueden contener un resplandor saturado cada uno (rosa, violeta, verde, azul) con aproximadamente 38% de opacidad.
Tipo de visualización	Fraunces 700, opsz 144, letter-spacing:-.035em, minúsculas, altura de línea .92 (Denton es el aspecto original de pago).
Cuerpo / IU	Urbanist 400–700 (aspecto Gilroy). Cejas 13px 700 mayúsculas letter-spacing:.32em. Botones 13px 700 mayúsculas .18em.
Formas	Píldoras para botones y alternadores; radios de 20–44px para paneles; círculos para pozos de iconos, monedas y el dial. Sin bordes, sin líneas finas.
Grabado	Mismo color que la superficie + text-shadow: 1px 1px 1px claro, -1px -1px 1px oscuro. Solo para decoración (números de tarjeta, palabras no leídas).

3. Patrones de sección

1. Encabezado – monograma redondo elevado + marca denominativa serif; píldora presionada con LED ("nuevo · …"); pista de idioma presionada cuyo segmento activo está elevado; botón de tema redondo elevado. Sticky; gana una sombra suave después del desplazamiento.
2. Héroe – izquierda: ceja, titular serif minúsculas de 2 líneas, breve introducción, un botón primario (texto lima) y uno simple en píldora, dos pozos de estadísticas presionados marcados como "muestra". Derecha: anillos de relieve concéntricos (elevado, presionado, elevado) con una tarjeta en relieve encima (chip convexo, número grabado, LED), inclinada -8° y siguiendo el mouse.
3. Historia – un panel elevado grande; ceja ("la membresía se gana."); un párrafo serif cuyas palabras comienzan grabadas y se iluminan una por una a medida que el lector se desplaza.
4. Aplicación – un teléfono elevado con una pantalla presionada emerge de una ranura presionada; dentro, una tarjeta de factura elevada (LED de fecha de vencimiento, monto, botón de pago) y dos filas de lista. Titular serif centrado y texto de introducción debajo.
5. Tarjetas – dividido: texto a la izquierda; cinco losas de tarjeta elevadas que se abren en abanico desde un pivote común a medida que la sección se desplaza; la losa frontal lleva el estado LED.
6. Carril de pago – ceja + titular, botones redondos elevados de anterior/siguiente; carril horizontal de desplazamiento con ajuste de baldosas elevadas: pozo de icono presionado + etiqueta en mayúsculas, título de dos líneas, botón pequeño en píldora, un pozo "mostrar" presionado con un resplandor coloreado y un objeto de relieve (teléfono punteado, cuadrícula de chip, anillos sin contacto, barras divididas).
7. Recompensas – titular centrado; cuadrícula 3×2 de monedas convexas que flotan lentamente; presionar una la hunde y revela una recompensa de muestra.
8. Seguridad – dividido: dial elevado con 60 marcas que giran con el desplazamiento alrededor de una perilla convexa con un candado lima; ceja y un párrafo grande sans iluminado por un foco móvil (sigue el puntero, se desplaza por sí solo de otra manera).
9. Prueba – titular + dos baldosas de calificación elevadas: número serif, /5, una pista presionada con un relleno lima. Etiquetado como muestra a menos que sea real.
10. Unirse – panel elevado: titular ("la puerta se abre para algunos."), introducción, una pista presionada deslizar para unirse con una perilla convexa; a la derecha un pozo presionado con una baldosa QR elevada.
11. Preguntas frecuentes – etiqueta centrada con espaciado amplio; barras <details> elevadas que se vuelven presionadas cuando están abiertas.
12. Pie de página – un panel presionado con logotipo, dos columnas de enlaces y una tarjeta promocional elevada; una línea de letra pequeña debajo.
13. Insignia flotante – "obtén la aplicación" elevada en la parte inferior derecha con un QR pequeño; se oculta mientras la sección de unirse está visible y por debajo de 900px.

4. Interacciones características

• Luz del cursor – en pointermove establece el vector de sombra a normalizar(centro − cursor) y suaviza --lx/--ly hacia él en requestAnimationFrame. Cada sombra se construye a partir de estas variables, por lo que toda la página se re-ilumina a la vez. Solo para (pointer:fine); luz fija superior izquierda con movimiento reducido.
• Palabras grabadas → iluminadas – divide el párrafo en <span class="w">; ilumina las primeras progreso × conteo palabras. Re-divide después de un cambio de idioma. Movimiento reducido: todas iluminadas.
• Inclinación de tarjeta – rotateX/rotateY hasta ±11° desde la posición del puntero sobre el escenario; vuelve a la posición plana al salir.
• Elevación del teléfono / abanico de tarjetas / dial – cada uno lee un valor de progreso de desplazamiento (0→1) y escribe una variable CSS (--p, --fan, --rot). Movimiento reducido: estado final.
• Estados presionados – cada elemento de relieve clicable intercambia su sombra exterior por el par interior en :active o aria-pressed="true" y escala a .985.
• Texto spotlight – un párrafo duplicado aria-hidden en blanco completo enmascarado con un gradiente radial en --mx/--my.
• Deslizar para unirse – perilla capturada por el puntero; soltar más allá del 90% completa, de lo contrario retrocede; las teclas de flecha y Enter funcionan; la perilla tiene role="slider" con aria-valuenow. Nunca envía nada a menos que el cliente lo conecte.
• Cambio de tema – cambia data-theme en <html>; solo cambian los tokens.

5. Reglas de construcción

• HTML autónomo con doctype/charset/viewport; solo Google Fonts; no se requieren imágenes (todo el relieve es CSS, el QR es un patrón decorativo de canvas, marcado como muestra).
• Define ambos materiales como conjuntos de tokens. El conjunto de la página se encuentra en :root; el conjunto opuesto en .alt (intercambiado bajo [data-theme="light"]). Reconstruye --raise --raise-sm --inset --inset-sm en :root, .alt para que cada isla use su propio par; declara --island / --island-sm solo en :root para que las islas hereden el par de la página para su sombra exterior. Los componentes nunca escriben una sombra a mano.
• Cualquier cosa que lea colores en JS (el canvas QR) debe leerlos de su propio elemento, no de :root.
• Cada elemento que proyecta una sombra se encuentra sobre background: var(--bg). Los contenedores con desbordamiento (carriles) necesitan aproximadamente 30px de relleno para que las sombras no se recorten.
• Accesibilidad: contraste de texto ≥ 4.5:1 independientemente del relieve; anillo de enfoque lima visible; el estado presionado también se expone con aria-pressed; el relieve decorativo es aria-hidden.
• prefers-reduced-motion: sin seguimiento de luz, sin inclinación, sin flotación, todas las piezas de desplazamiento en su estado final, spotlight apagado.
• Móvil (< 900px): las cuadrículas se apilan, la insignia se oculta; (< 640px) la píldora del encabezado se oculta, las monedas van a 2 columnas.

6. Escribir el texto

• Titulares en minúsculas, cortos y declarativos, máximo dos líneas: "construido para personas que pagan a tiempo".
• Las cejas son oraciones completas en mayúsculas con un punto: "LA MEMBRESÍA SE GANA."
• Texto del cuerpo simple y concreto. Sin exageraciones, sin números inventados; marca las muestras en su lugar.
• Traduce cada cadena, incluidas las escritas en JS (monedas, resultado del deslizador, etiquetas de tema).

7. Lista de verificación final

• Dos materiales, aproximadamente equilibrados en cada pantalla; sin bordes; cada sombra proviene de los tokens.
• Sin halo blanco alrededor de las islas claras en la página oscura (la sombra exterior usa --island).
• Mover el mouse gira cada sombra en la página; el tacto y el movimiento reducido obtienen una luz fija.
• Todo el texto legible pasa el contraste en ambos temas; el grabado solo en decoración.
• Las sombras del carril no se recortan; nada se desplaza horizontalmente a 390px.
• Las calificaciones, conteos de miembros, tasas y afirmaciones de seguridad son reales o están etiquetadas; sin logotipos o renders de terceros.
• El cambio de idioma no deja texto en el idioma fuente.
• Capturas de pantalla a 1440×900 y 390×844 (node scripts/screenshots.mjs example/index.html screenshots; el script mueve un mouse virtual para que la dirección de la luz se muestre, y captura ambos temas).